localStorage|sessionStorage主要区别
sessionStorage的生命周期是浏览器关闭前,而localStorage的生命周期是永久的。
为什么要管理
防止项目滥用本地存储(localStorage|sessionStorage)而出现例如:
不同业务线,却用着同样的key命名存储,存储数据相互修改。这样的bug一旦出现,可能很难排查到,毕竟测试流程一般是单业务线的走。
完整代码附带详细注释
代码只演示单一存储方式,具体使用哪种根据项目使用情况及两者区别来定。
如果项目需要两种存储方法一起用,可以自行优化(storage对象另外添加3个方法或者现有方法添加参数支持,当然还需要同步修改优化原型方法)。
核心代码
/**
* storage再封装
* 需要在./data中注册后的字段才可以运行存储
*/
// 引入注册列表
import {config} from './data';
// 存储变量添加统一前缀(例如:项目_作者_ 下划线分割的方式)
const pre = 'project_author_';
// 存储方式 'localStorage' | 'sessionStorage'
const storageType = 'sessionStorage';
/**
* 核心:阻止未注册key添加到存储中——装饰模式优化setItem方法
* 考虑到没有添加就不会有获取和删除,所以只对setItem做处理
*/
const setOptimize = function (setItem) {
return function (...args) {
// setItem第一个入参为key
const [key] = args;
// 自定义注册列表config中,如果不包含当前key(需要截取掉自定义前缀)则阻止存入,并添加友善提示
if (!config.includes(key.substr(pre.length))) {
// 如果有eslint配置禁用console,可以自行添加 // eslint-disable-next-line
console.warn('当前字面量' + key + '未配置缓存,请在/src/tools/localStorage/data中注入属性');
} else {
// 如果已注册则直接返回原储存方法即可
return setItem.apply(this, args);
}
};
};
// 获取原型并调用优化方法
Object.getPrototypeOf(window[storageType]).setItem = setOptimize(Object.getPrototypeOf(window[storageType]).setItem);
// 重写调用本地存储的方法,统一项目的调用方式
const storage = {
get (key) {
return JSON.parse(window[storageType].getItem(pre + key));
},
set (key, value) {
return window[storageType].setItem(pre + key, JSON.stringify(value));
},
remove (key) {
return window[storageType].removeItem(pre + key);
}
};
export default storage;
配置示例(key的列表)
export const config = [
'userName', // 缓存的用户名
'TOCKEN', // tocken
'@@', // ***
'vuex' // ***
];
调用简易示例
// 引入存储方法
import storage from '@/tools/localStorage';
// 存
storage.set('userName', this.userName);
// 取
this.userName = storage.get('userName');
// 删
storage.remove('userName');
成果图展示
存储数据展示
未注册key添加存储时友善提示展示
尾言
不管项目是否需要这样的管理方案,总归是有益无害。
最后:你是否知道配置示例(key的列表)中'@@'和'vuex'分别是定义什么的key吗?欢迎留言评论。