[html]【面试】关于 localStorage 的常规回答以及加分回答

分享几个关于 localStorage 的面试题：


【★】localStorage 和 sessionStorage 有什么区别？
【★★】如何让 localStorage 实现和 cookie 一样的自动过期功能？
【★★★】文中提到 localStorage 一般浏览器支持的是 「5M」 大小，超过了会怎么样？
【★★★★】localStorage 的跨域了解么？


常规回答


localStorage 和 sessionStorage 以及 cookie 的区别，是一个比较常规的面试题，现在很多面试也已经不问了。
我们可以从几个方面来进行对比：


生命周期容量服务端交互API 是否友好...
具体不展开了，自行了解。
这只是常规回答，如果想要回答的更好，可以展开这样说：


加分回答


在问第一个问题时


localStorage 是长效存储的，但是有的场景希望用它来实现数据缓存功能，并且像 cookie 一样可以设置时间，这该如何处理。比如：

/**
 * 设置本地存储
 * @param {string} name key
 * @param {*} value value 可以是string、obj等
 * @param {number} time 缓存时间(ms)
 */
export const setStorage = (name, data, cacheTime) => {
  if (!name) return;
  const storage = {
    createdTime: new Date().getTime(),
    cacheTime,
    data,  };
  window.localStorage.setItem(name, JSON.stringify(storage));
}
/**
 * 获取本地存储
 * 如果未设置缓存时间或者在缓存时间内则返回数据
 * 如果过期则返回 undefined
 * @param {string} name key
 */
export const getStorage = name => {
  if (!name) return;
  const storage = JSON.parse(window.localStorage.getItem(name));
  if (!storage) return;
  if (storage.cacheTime && new Date().getTime() - storage.createdTime > storage.cacheTime) {    clearStorage(name);
    return;
  }
  return storage.data;
}
/**
 * 清除本地存储
 * @param {string} name key
 */
export const clearStorage = name => {
  if (!name) return;
  window.localStorage.removeItem(name);
}

简单的写了一下，可以再看看。


可以说一下如果超过了 localStorage 设置的 5M 容量会怎么样，如何安全地使用 localStorage。一般来说，只要规范合理的管理 localStorage，是不会出现这种情况的，反正我是没遇到过。
不过如果真需要存储一个超级长的字符串，或者假如存了一个图片的 base64，也要知道如何处理。


判断是否超容量如果超容量可以使用 indexDB 或者 提示用户满了然后清掉之前的...


localStorage 是键值对的结构，使用起来比较方便，可以 getItem/setItem，甚至直接 localStorage.xxx 都可以（当然最好不要这样）。
而 cookie 的存取就比较麻烦，当然业界也有封装好的方法可以使用。


因为 cookie 不允许跨域访问，为了突破这个限制，可以使用 postmessage 和 localstorage 进行数据跨域共享。
之前没遇到过相关场景，也没怎么研究，学到了学到了。
先收藏了，感兴趣的同学看：使用 localstorage 代替 cookie 实现跨域共享数据。
这样一套组合拳打出来，KO。


参考：https://juejin.im/post/5e9bbf9451882573965183b5