webStorage

  1. 存储内容大小一般支持 5MB 左右（不同浏览器可能还不一样）。
  2. 浏览器端通过 window.localStorage 和 window.sessionStorage 属性来实现本地存储机制。

localStorage 和 sessionStorage 的区别

localStorage: localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据（clear() / 清除缓存），否则数据永远不会消失
sessionStorage: sessionStorage 的生命周期是仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念，sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的。

localStorage 和 sessionStorage 都具有相同的操作方法，例如 setItem()、getItem() 和 removeItem() 等

  • 设置 / 修改

    r如果键名存在，则更新其对应的值。

  1. sessionStorage.setItem('key', 'value');
  2. localStorage.setItem('key', 'value');
  • 获取
  1. sessionStorage.getItem('key');
  2. localStorage.getItem('key');
  3. // 获取不到的均返回 null
  • 删除数据
  1. sessionStorage.removeItem('key');
  2. localStorage.removeItem('key');
  • 清空数据源
  1. sessionStorage.clear();
  2. localStorage.clear();

cookie

cookie和webStorage的区别

image.png

indexedDB

浅谈浏览器本地存储-indexedDB