一、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当会话结束(当前页面关闭的时候,自动销毁)