步骤
1.页面销毁的时候添加缓存
2.加载数据的时候取出缓存
3.如果是第一次进到页面,判断section缓存还没有,直接取的是请求回来的数据。
4._.set数据时候要用深度遍历(递归遍历)
//1.
beforeDestroy() {
//将数据转成字符串
var _data_str = JSON.stringify(this._data);
this.$session.set('car_parameter', _data_str);
},
//2.
mounted() {
var _data_str = this.$session.get('car_parameter');
//将json字符串转成对象
var store_data = JSON.parse(_data_str);
//3.
if (_data_str) {
//4.
_.set(this._data,store_data);
}else {
this.$xhr
.post('获取数据URL')
.then(res => {
this._data = res.data;
})
.catch(() => console.log('请求错误'));
}
},
(注意:这里的session我进行了封装,你也可以直接使用浏览器的session)
session封装详情:https://www.jianshu.com/p/1a6801aa9250
深度遍历方法
_.set = (target, current, cb) => {
if (!(target instanceof Object) || !(current instanceof Object)) return;
Object.keys(target).forEach(function(name) {
let value = current[name];
if (typeof value !== 'undefined' && target.hasOwnProperty(name)) {
// 如果有callback,先执行callback
if (typeof cb === 'function') {
target[name] = cb(name, value);
return;
}
// 如果是对象,进行深层次拷贝
if (Object.prototype.toString.call(target[name]) === '[object Object]') {
_.set(target[name], current[name], cb);
return;
}
target[name] = value;
}
});
};