[Vue.js] vue-cookie 사용하기

파트너사 페이지를 구축하던 중에 사용자 편의를 위해 컬럼 위치 조정도 되고 hide&show 도 가능하게끔 해서 사용자 별로 원하는 양식을 저장하게 해주자 라는 기획이 나왔다. (이 기획을 요니킴님이 싫어합니다.)

 

1. vue-cookie 사용하기

2. localStorage 사용하기

---

Cookie vs LocalStorage

---

 

 

Cookie 는 서버측과 클라이언트측 양쪽에서 데이터 접근이 가능한 반면 LocalStorage 는 로컬 환경에서만 컨트롤된다. 즉, 서버측에서 데이터를 사용해야 할 일이 잦다면 Cookie 를, 아니면 LocalStorage 를 사용하는게 좋다. 

 

	Cookie	LocalStorage
도입 시기	HTML5 이전에 도입	HTML5 와 함께 도입
만료일	만료일이 있음	만료일이 없음
지우기	JS 또는 브라우저의 브라우징 데이터 지우기 또는 만료일 이후에 지워짐	JS 또는 브라우저의 브라우징 데이터 지우기에 의해 지워짐
서버 전송	각 요청마다 서버로 전송됨	데이터를 서버로 전송해야 하는 시기를 선택 가능
용량	4KB	5MB
데이터 타입	문자열만 저장 가능	문자열만 저장 가능

 

---

vue-cookie 사용하기

---

 

vue-cookies 설치하기

$ npm install --save vue-cookies

 

▷ main.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuetify from 'vuetify/lib'
import VueCookies from 'vue-cookies'
import dotenv from "dotenv"

import App from './App.vue'

Vue.use(VueRouter)
Vue.use(VueCookies)
Vue.use(Vuetify)

dotenv.config()

new App({
    render: (h) => h(App)
}).$mount('#app')

 

* 쿠키 사용 방법은 아래와 같다.

// From some method in one of your Vue components
this.$cookie.set('test', 'Hello world!', 1);
// This will set a cookie with the name 'test' and the value 'Hello world!' that expires in one day
 
// To get the value of a cookie use
this.$cookie.get('test');
 
// To delete a cookie use
this.$cookie.delete('test');

 

▷ src/components/Excel/Main.vue

<template>
<v-card class="pa-3 pb-5 justify-center">
    <v-card-title dense class="px-2 py-0">
    	<v-btn class="mx-5" color="teal" outlined small @click="downloadExcelFile">
            <v-icon small>mdi-download</v-icon>
            다운로드
        </v-btn>
        <v-btn class="mx-5" outlined small @click="saveExcelFormat">
            <v-icon small>mdi-download</v-icon>
            양식저장
        </v-btn>
    </v-card-title>
    <v-divider />
    <v-layout wrap>
        <template v-for="column in columns">
            <v-checkbox :key="column.datafield" :label="column.text" v-model="column.checked" dense hide-details @click="hideOrShowColumn(column)"></v-checkbox>
        </template>
        <JqxGrid ref="myGrid"
            width="100%" :source="dataAdapter" :columns="columns"
            :editable="true" :enabletooltips="true" :selectionmode="'multiplecellsadvanced'"
            :autoheight="true" :altrows="true"
            :columnsresize="true" :columnsreorder="true"
        >
        </JqxGrid>
    </v-layout>  
</v-card>
</template>
<script>
import { mapState } from 'vuex'
import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";

export default {
  name: 'Excel',
  components: {
    JqxGrid,
  },
  beforeCreate: function() {
    this.source = {
      localdata: [{
        id: 1,
        firstname: 'yoni',
        lastname: 'kim',
        productname: 'tistory',
        available: true,
        quantity: 1,
        price: 10000000000,
        total: 1
      }],
      datafields: [
        { name: 'id', type: 'number' },
        { name: 'firstname', type: 'string' },
        { name: 'lastname', type: 'string' },
        { name: 'productname', type: 'string' },
        { name: 'available', type: 'bool' },
        { name: 'quantity', type: 'number' },
        { name: 'price', type: 'number' },
        { name: 'total', type: 'number' }
      ],
      datatype: 'json'
    }
    
    // 디폴트 컬럼값
    this.columns = [
      { text: 'First Name', datafield: 'firstname', width: 200, cellsalign: 'center', align: 'center', editable: false, checked: true },
      { text: 'Last Name', datafield: 'lastname', width: 200, cellsalign: 'center', align: 'center', editable: false, checked: true },
      { text: 'Product', datafield: 'productname', width: 180, cellsalign: 'center', align: 'center', checked: true },
      { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'center', align: 'center, checked: true' },
      { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'center', align: 'center', cellsformat: 'c2', checked: true },
      { text: 'Total', datafield: 'total', cellsalign: 'center', align: 'center', cellsformat: 'c2', checked: true }
    ]
    
    // 만약 쿠키가 존재한다면 디폴트 컬럼값에서 hidden 값과 index 값 수정
    if (this.$cookies.isKey('excelFormat')) {
      const excelForamt = this.$cookies.get("excelFormat")
      const format = JSON.parse(excelForamt)
      const _this = this
      format.map((f) => {
        _this.columns.map((c) => {
          if (f.datafield === c.datafield) {
            c.hidden = f.hidden
            c.checked = !c.hidden
            c.index = f.index
          }
        })
      })
    }
  },
  computed: {
      ...mapState(['REDASH_API', 'CEZERIN_API', 'MARKET_API', 'WMS_API']), 
  },
  data: function () {
    return {
      // eslint-disable-next-line
      getWidth: getWidth('grid'),
      // eslint-disable-next-line
      dataAdapter: new jqx.dataAdapter(this.source)
    }
  },
  methods: {
    downloadExcelFile() {
        this.$refs.myGrid.exportdata('xls', 'jqxGrid');
    },
    saveExcelFormat() {
        const columns = this.$refs.myGrid.getstate().columns
        const columnList = []
        Object.keys(columns).map((key) => {
	        const { text, hidden, index } = columns[key]
            const column = { datafield: key, text, hidden, index }
            columnList.push(column)
        })
        this.$cookies.remove("excelFormat")
        this.$cookies.set("excelFormat", JSON.stringify(columnList))
    },
    hideOrShowColumn: function(column) {
        this.$refs.myGrid.beginupdate();
        if (column.hidden) {
            this.$refs.myGrid.showcolumn(column.datafield);
        } else {
            this.$refs.myGrid.hidecolumn(column.datafield);
        }
        this.$refs.myGrid.endupdate();
    }

  }
}
</script>