最近，公司在进行团队扩充，会进行一些人员面试的工作。
除了基础八股文知识， 我更看中候选人对具体场景问题的设计和解决能力。
所以在我的日常面试中，最常问的一个问题就是，关于本地存储能力的封装。
问题
- 我们在日常开发中，用到的本地存储都有哪些啊？
- 他们各自有什么优劣啊？
- 我们应该如何利用现有浏览器提供的本地存储能力（storage, cookie） 实现一个新的存储工具，让它拥有更好浏览器兼容性、 更友好的API存储JS对象、 同时还能支持单一值的过期时间限制呢？
考察能力
ok, 废话不多说。 我们来对这3个小问题设计的思想进行一下揭示。
第一题解析：
答案：
cookie 、localStoreage 、 sessionStorage 、 IndexDB (这个其实聊到的很少)。
这一题绝大多数候选人都能答出来， 偶尔会有很年轻的同学会说，我只知道 localStorage、 sessionStorage。
这题考察的，就是基础知识掌握，跟候选人，对齐一下前提认知。方便后续引出存储工具的设计题目。
因为特别简单，也能让候选人放松下来，去更好的展现自己的真实能力。
第二题解析：
答案：
| 差异 | storage | cookie |
|---|---|---|
| 存储大小 | 5M | 4K, 20 - 50个左右 |
| 存储类型 | utf-16, 文本 | 文本 |
| 存储时效 | 永久 | 可设置 |
| 共享性 | 当前域 | 可设置存储域根域 |
| 事件回调 | 有 | 无 |
| 网络请求 | 不被网络请求携带 | 被网络请求携带 |
| 存取方式 | set, get API | 替换整体Cookie |
等等, 上表列出了一些我们常见的差异。
解析：
这一题主要考察对，两种存储方式的异同的了解。 和各自存储方式更擅长做的一些事情。
绝大部分人，也都能知道一些异同性，或者 经过引导可以知道一些异同性。 便于我们提出本次设计问题的最终问题第三题。
第三题解析：
答案：
因为, 直接操作cookie的增删改查比较麻烦为了本次示例代码的简单性，我们直接用jscookie代替复杂的cookie 操作。 本代码仅做考察点，示例。
type storageItme = {
data: string,
expires?: date
}
import * as jscookie from 'jscookie';
class Storage {
constructor() {
}
setItem(key, data, expires) {
// 适配器模式
const storageData: storageItme = {
data
};
expires && (storageData. expires = expires);
if(window.localStorage) {
this._setStorage(key, storageData);
} else {
this._setCookie(key, storageData);
}
}
private _setCookie(key, item: storageItme) {
if (item.expires) {
jscookie.set({
name: key,
value: JSON.stringify(item),
expires: expires
})
} else {
jscookie.set(key, JSON.stringify(item))
}
}
private _setStorage(key, item: storageItme) {
localStorage.setItem(key, JSON.stringify(item))
}
getItem(key) {
// 直接去取值
if(window.localStorage) {
let data = localStorage.getItem(key)
if(!data) return null;
data = JSON.parse(data);
if(data.expires) {
// 用Date 判断是否过期
if(过期) {
return null
} else {
return data.data
}
}
}
// .... 省略一些示例代码
}
}
上述代码示例。 基本描述了实现过程。
我们现在来揭示一下，思考过程。
-
存储对象。 也就是API 拿到数据之后，由工具框架进行JSON 格式化转换。
-
更好的兼容性。 对localStore 进行适配器降级。 如果不支持，则用cookie 进行存储。
-
过期时间限制。 cookie不用做任何考虑直接就取出undefined 了，如果是localStorage 引擎，则我们在格式成对象后，进行过期与否的判断，并进行数据移除。 这个地方，需要考虑的时候，很多候选人会考虑定时轮询进行数据的移除是很不可取的。
**感谢您的阅读，希望能帮助到您。 **
