本地存储---localStorage、sessionStorage

 一、localStorage

1. 特点

• 生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

• 存储的信息在同一域中是共享的。

• 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。

• 大小：据说是5M（跟浏览器厂商有关系）

• 在非IE下的浏览中可以本地打开。IE浏览器要在服务器中打开。

• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

• localStorage受同源策略的限制

 2. 用法

   // 存储本地数据
       localStorage.setItem("setLocal", this.localStorageData);

   // 获取本地数据
       let localData = localStorage.getItem("setLocal");
           console.log("点击获取本地数据", localData);

   // 删除本地数据
       localStorage.removeItem("setLocal")

   // 清除所有存储
       localStorage.clear()

 二、sessionStorage

1. 特点

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据

2. 用法

// 保存数据语法：
sessionStorage.setItem("key", "value");

// 读取数据语法：
var lastname = sessionStorage.getItem("key");

// 删除指定键的数据语法：
sessionStorage.removeItem("key");

// 删除所有数据：
sessionStorage.clear();

三、localStorage,sessionStorage区别 

相同：在本地（浏览器端）存储数据。

不同：

• localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。

• sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

• localStorage是永久存储，除非手动删除。

• sessionStorage当会话结束（当前页面关闭的时候，自动销毁）