localStorage功能在开发中的两个简单代码

localStorage作为存储功能在项目中我使用的次数是很多的。作为一个前端，尽量是让用户少输入，接口少请求，除了一些特定的数据不要存储在本地，其它数据都会放在本地，并加入时效机制。

本地存储、读取数据方法

/**
* 本地存储、读取功能
* @param { String } item 本地存储的id
* @param { any } data 本地存储的详情 不传视为读取
* @param { Number } time 有效时间，单位s 默认保存3天 259200s
* @return { any } 视参数而定
*/
const local = (item, data, time) => {
// 获取本地保存的有效期
const validity = localStorage.getItem(`${item}-validity`);
// 获取localStorage储存的时间
const localTime = new Date(localStorage.getItem(`${item}-time`));
if (data) {
// 存储
localStorage.setItem(item, JSON.stringify(data));
// 存储时间
localStorage.setItem(`${item}-time`, new Date());
// 存储有效时间
localStorage.setItem(`${item}-validity`, time || 259200);
} else if (new Date() - localTime < validity * 1000) {
// 有效期内
return JSON.parse(localStorage.getItem(item));
}
// 失效
return null;
};
const obj = {
name: '叶落尘',
address: '成都'
}
// 存储功能 模拟10s
local('obj', obj, 10);
// 读取
const timer = setInterval(() => {
const localObj = local('obj');
console.log(localObj);
if (!localObj) {
clearInterval(timer);
}
}, 1000);

线上运行时清除缓存

有时候会出现上线之后，由于业务变动，或者突发状况，导致本来前后端相约好了的字段发生变化，这时候最快捷、安全、暴力的解决方法就是localStorage.clear()。

过年的时候就遇到这种情况，大年三十的时候，大家乐呵乐呵看春晚，而我还在改代码0.0。

/**
* 项目清除本地存储
* @param { String } sessionId 项目ID
*/
const clearLocal = (sessionId) => {
// 获取版本号的本地存储的值
const item = localStorage.getItem(sessionId);
// 如果本地没有该值，即为全新版本，清除并存储
if (!item) {
localStorage.clear();
localStorage.setItem(sessionId, 'success');
}
};
// 版本1
clearLocal('v1');
const obj = {
name: '叶落尘',
address: '成都'
}
// 使用local()存储
local('obj', obj);
console.log(local('obj')); // {name: "叶落尘", address: "成都"}
// 若项目改变，版本号变化
clearLocal('v2');
console.log(local('obj')); // null

以上就是两个简单的方法，当然是有bug的，毕竟是获取浏览器的时间，如果用户改变了机器时间，就失效咯。

若有问题欢迎指出，谢谢～