vue 本地儲存、會話存儲插件vue-ls的使用

 

安裝

npm install vue-ls --save
或
yarn add vue-ls

vue項目中使用

//在vue項目中的入口文件main.js中引入

import Storage from 'vue-ls';

options = {
  namespace: 'vuejs__', // 存儲的key的前綴
  name: 'ls', // 命名，Vue變量.[ls]或this.[$ls]。全局：Vue.ls，上下文：this.$ls
  storage: 'local', //  存儲名稱【三個可選項】:session, local, memory
};

Vue.use(Storage, options);

//或Vue.use(Storage);

new Vue({
    el: '#app',
    mounted: function() {
//在需要的地方進行以下的對storage的js操作，
        Vue.ls.set('foo', 'boo');//不傳第三個參數的話即默認有效期值expire為null
        //Set expire for item
        Vue.ls.set('foo', 'boo', 60 * 60 * 1000); //有效1小時
        Vue.ls.get('foo');
        Vue.ls.get('boo', 10); //如果沒有設置boo返回默認值10
        
        let callback = (val, oldVal, uri) => {//val：當前值，oldVal：舊值，uri:修改來自的選項卡的url
          console.log('localStorage change', val);
        } 
        
        Vue.ls.on('foo', callback) //偵查改變foo鍵並觸發回調
        Vue.ls.off('foo', callback) //不偵查
        
        Vue.ls.remove('foo'); //從storage中移除，返回值true或false

        Vue.ls.clear() //清除storage
    }
});