vue 本地儲存、會話儲存外掛vue-ls的使用
阿新 • • 發佈:2021-07-14
安裝
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返回預設值10let 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或falseVue.ls.clear() //清除storage } });