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()
:清除存储空间。