浏览器存储WebStorage

介绍

浏览器存储WebStorage包括 LocalStorage 和 SessionStorage，存储内容大小一般在5M左右。

如何使用

浏览器通过Window.localStorage 和 Window.sessionStorage属性来实现本地存储机制，在实际使用中可省略Window。

API使用

LocalStorage 和 SessionStorage的API方法名称用法相同，分别有新增、获取、删除、清空四个方法，方法名称及使用方法见下面示例：

  //新增WebStorage： setItem(key,val)
  localStorage.setItem("a", "123");
  localStorage.setItem("b", "456");
  localStorage.setItem("c", "789");
  sessionStorage.setItem("a", "123");
  sessionStorage.setItem("b", "456");
  sessionStorage.setItem("c", "789");
      
  //获取WebStorage： getItem(key)
  localStorage.getItem("a");
  sessionStorage.getItem("a");

  //删除WebStorage： removeItem(key)
  localStorage.removeItem("c");
  sessionStorage.removeItem("c");

  //清空WebStorage： removeItem(key)
  localStorage.clear();
  sessionStorage.clear();

LocalStorage 和 SessionStorage区别

同为浏览器储存的WebStorage，LocalStorage 和 SessionStorage使用的API相同，但实际使用场景是有区别的：

• LocalStorage
  使用localStorage保存的数据会长期保留，即使你关闭浏览器下次重新打开该页面，保存的数据依然还在不会被清空，如果需要清空必须手动清除。而且在同个浏览器相同源（window.location.origin）的其他页面都是可以通过 localStorage 访问到，当然了源与源之间的 localStorage 是不能互相访问的。即每个源之间的 localStorage 是相互独立的。

• SessionStorage
  使用sessionStorage保存的数据只是当前页面会保留，即页面会话级别，当关闭浏览器或者关闭页签后sessionStorage保存的数据会被清空，而且在同个浏览器即使相同源，其他页面不可以共享sessionStorage保存的数据。