开发技巧---Vue-ls 本地储存

Vue-ls是Vue的插件，用于从Vue上下文中使用本地Storage，会话Storage和内存Storage。

它的github：vue-ls

使用前需要安装：npm install vue-ls

// 导入vue-ls import Storage from 'vue-ls'; options = { namespace: 'vuejs__', // key键前缀 name: 'ls', // 命名变量,通过Vue.ls全局访问 storage: 'local', // 存储方式: session, local, memory }; Vue.use(Storage, options); // 或 Vue.use(Storage); new Vue({ el: '#app', mounted: function() { // 设置存储信息 key-value形式，内部会将value转换为JSON格式 Vue.ls.set('foo', 'boo'); // 设置有效期为1小时 Vue.ls.set('foo', 'boo', 60 * 60 * 1000); // 获取存储变量中的key Vue.ls.get('foo'); // 如果存储中没有name则返回默认值10 Vue.ls.get('name', 10); // 持续监听 foo 在其他标签上的更改 Vue.ls.on('foo', (newval, oldVal, url)=>{ // newval为当前storage中的key // oldval为旧的storage中的key // url可以告诉我们 值是由哪个URL改的 console.log('localStorage change', newval); }) // 删除先前的监听器 Vue.ls.off('foo') } });

其他常用API：

Vue.ls.remove(key)：从存储中删除key，删除成功返回true，失败则返回false。

Vue.ls.clear()：清除存储空间。