这里我写一个最简单的例子,方便你扩展
存放目录
本地存储插件 localstorage.js 我放到了plugins下
组件搭建
创建存储关键字
const STORE_KEY = 'STORE-KEY';
创建初始化函数和存储方法
export default{
data:null,
install: function(Vue) {
this.data = JSON.parse(window.localStorage.getItem(STORE_KEY)) || {};
if(this.data==null){
this.data = {};
}
Vue.prototype.$local = this;
// this.clearItems();
},
save(){
window.localStorage.setItem(STORE_KEY, JSON.stringify(this.data))
},
}
启用
/**本地存储 */
import local from "./plugins/localstorage"
Vue.use(local);
使用
在任意当前模版下调用
this.$local.save()
- 其他函数可自行扩展
- 这里将对象进行json序列化,读取的时候从json中还原回去
- 存储方法可以在router中写明,在切换页面时存储