需求背景
有时候，某些数据我们需要存一下，方便页面跳转等场景，还能继续获取到这些数据，比如登录状态... 那么，怎么写一个存和取的方法呢？相信大家都能够自己写出来（或者百度出来！）
浅试一下
废话不多说，上代码！噼里啪啦一顿敲之后，如下：
需要存的时候 setLocalStorage('xxx', 'xxxvalue') 即可，读取的时候 getLocalStorage(xxx) 即可。自我感觉可以。
那么问题来了，如果要存 'sessionStorage' 呢!
那我们来改一下原来的代码！
这个localStorage | sessionStorage 判断看着有点碍眼！提出去一下。
这样一来，读取和存储的方法就可以简化一下啦。
看上去似乎满足需求了，那么问题又来了，如果存的是数组或者对象，想读取的时候也返回数组或对象呢？
那怎么办呢？
先加个方法吧。只要调用之前的获取方法，转一下返回的数据格式就好了！
功能都实现了，附完整代码。
什么？就这样结束了？
年轻人，怎么可能就这样结束 0.0！
那我们把js转成ts吧，操作开始！
npm i -g typescript 安装一下优雅大礼包！
安装完成, 在刚才的文件目录执行 tsc --init
执行结束之后，你会发现目录多出来一个 tsconfig.json 文件，具体怎么配置呢？可以看一下这个文件 《typescript 的配置文件字段都代表啥意思？》
简单配置完成之后，我们开始敲键盘，一波操作之后，附上如下展示
/**
* 选择存储或读取类型
* @param {*} name string
*/
const switchStorage = (name: string) => {
// 这里兜底一下，不传类型默认 localStorage
const type = name === 'sessionStorage' ? 'sessionStorage' : 'localStorage';
return window[type];
}
/**
* 存储数据
* @param name string
* @param value string
* @param type 默认 localStorage, 使用 localStorage 或 sessionStorage
*/
const setStorage = (name: string, value: string, type: 'localStorage' | 'sessionStorage') => {
switchStorage(type).setItem(name, value);
}
/**
* 获取本地存储原始数据
* @param name
* @param type
*/
const getStorage = (name: string, type: 'localStorage' | 'sessionStorage') => {
return switchStorage(type).getItem(name);
}
/**
* 存储数据，默认存入 localStorage，value 会转成 string
* @param name string
* @param value any
* @param type 默认 localStorage, 使用 localStorage 或 sessionStorage
*/
const setStorageJson = (name: string, value: any, type: 'localStorage' | 'sessionStorage') => {
switchStorage(type).setItem(name, JSON.stringify(value));
}
/**
* 返回读取到的存储数据，转为对象，默认读取 localStorage
* @param name string
* @param type 默认 localStorage, 使用 localStorage 或 sessionStorage
*/
const getStorageJson = (name: string, type: 'localStorage' | 'sessionStorage') => {
try { // 这里兜底一下
return JSON.parse(`${getStorage(name, type)}`);
} catch (error) {
return null;
}
}
一顿操作之后，似乎可以用了，需要注意的是，具体存储在 ‘sessionStorage’ 还是 ‘localStorage’，需要看业务场景！有更好的建议欢迎指正！
