Vue插件，用于從Vue上下文中使用本地Storage，會話Storage和內存Storage

一個vue封裝的本地儲存的方法。

安裝

Npm

npm install vue-ls --save

Yarn

yarn add vue-ls

?

使用

Vue-ls Storage API

import Storage from 'vue-ls';options = {namespace: 'vuejs__', // key鍵前綴name: 'ls', // 命名Vue變量.[ls]或this.[$ls],storage: 'local', // 存儲名稱: session, local, memory };Vue.use(Storage, options); // 或 Vue.use(Storage);new Vue({el: '#app',mounted: function() {Vue.ls.set('foo', 'boo');// 設置有效期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) => {console.log('localStorage change', val);} Vue.ls.on('foo', callback) //偵查改變foo鍵并觸發回調 Vue.ls.off('foo', callback) //不偵查Vue.ls.remove('foo'); // 移除} });

Global(全局)

Vue.ls

Context（上下文）

this.$ls

API 說明

Vue.ls.get(name, def)

返回storage中?name值。在返回之前，內部解析JSON中的值

• def: 默認null, 如果為設置則返回?name?.

Vue.ls.set(name, value, expire)

在storage設置?name?的?value?.并將?value?轉化為JSON

expire: 默認為?null?,?name?有效時間以毫秒為單位

Vue.ls.remove(name)

從storage中移除?name?. 成功移除 true, 否則返回false.

Vue.ls.clear()

清除storage.

Vue.ls.on(name, callback)

持續監聽?name?在其他標簽上的更改，更改時觸發?callback?, 傳遞以下參數：

• newValue: 當前storage中?name?, 從持久化的JSON中解析
• oldValue: 舊的storage中?name?, 從持久化的JSON中解析
• url: 修改來自選項卡的URL

Vue.ls.off(name, callback)

刪除以前的偵聽器?Vue.ls.on(name, callback)

總結

以上是生活随笔為你收集整理的vue-ls vue 本地储存示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。