sessionStorage&localStorage封装

store.js

store.set(key, val)  //存储 key 的值为 val
store.get(key)  // 获取 key 的值
store.remove(key) // 移除 key 的记录
store.clear()  // 清空存储
store.getAll() // 返回所有存储
store.forEach() // 遍历所有存储

本地存储大小限制

localStorage 拓展了 cookie 的 4K 限制
localStorage 会可以将第一次请求的数据直接存储到本地，相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽

localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
localStorage 的使用也是遵循同源策略的，不同的网站直接是不能共用相同的 localStorage
localStorage 只支持 string 类型的存储

IE8 以上的 IE 版本才支持 localStorage 这个属性
localStorage在浏览器的隐私模式下面是不可读取的
localStorage不能被爬虫抓取到

localStorage和 sessionStorage的区别

localStorage 属于永久性存储，
sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空

localStorage

localStorage MDN文档

localStorage.js

const { localStorage } = window;
// 获取 localStorage
export function getStorage(key) {
  // 不传 key，默认获取所有
  if(!key) {
    const keys = getStorageKeys();
    return keys.reduce((prev, key) => {
      prev[key] = getStorage(key);
      return prev;
    }, {});
  }
  const item = localStorage.getItem(key);
  try {
    return JSON.parse(item);
  } catch (e) {
    return null;
  }
}
export function getStorageKeys() {
  return Object.keys(localStorage);
}
// 存储 sessionStorage
export function setStorage(key, value) {
  // 如果没有传 value，就删除当前的 key
  const falsy = [undefined, null].includes(value);
  if(falsy) return removeStorage(key);
  // 如果 key是个 JSON，是否需要遍历设置？待定
  localStorage.setItem(key, JSON.stringify(value));
}
// 删除 sessionStorage
export function removeStorage(key) {
  localStorage.removeItem(key);
  return getStorage(key);
}
// 清除所有的 localStorage
export function clearStorage(key) {
  localStorage.clear();
}

sessionStorage

sessionStorage文档

const { sessionStorage } = window;
// 获取 sessionStorage
export function getSession(key) {
  const item = sessionStorage.getItem(key);
  try {
    return JSON.parse(item);
  } catch (e) {
    return null;
  }
}
export function getSessionKeys(key) {
  return Object.keys(localStorage);
}
// 存储 sessionStorage
export function setSession(key, value) {
  sessionStorage.setItem(key, JSON.stringify(value));
}
// 删除 sessionStorage 指定key 
export function removeSession(key) {
  sessionStorage.removeItem(key);
}
// 删除所有 sessionStorage
export function clearSession() {
  sessionStorage.clear();
}