开发技巧---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()：清除存储空间。