离线存储

一、离线存储
window.sessionStorage 和 window.localStorage

它们的方法完全一致.
新增和修改： setItem(key, value) 都是字符串的数据（数字，布尔，JSON需要转字符串）
删除：removeItem(key)
清空：clear();
根据索引获取key名：key(number) 索引从0开始。
根据key名获取value: getItem(key);

它们的属性完全一致.
存储了多少条键值对 length

同域：
协议+域名+端口（如果网站的端口是80，不需要显示的写80）必须完全一致！

sessionStorage vs localStorage

生命周期：
sessionStorage：数据创建 -- 浏览器页签关闭
localStorage: 数据创建 -- 用户显示删除（清空历史记录，clear(), removeItem(key)）
数据共享（范围）：
sessionStorage：在同一个页签，同域。
localStorage : 同域。

所有离线数据实在浏览器端创建：每次请求不会发送到服务器！！！

历史记录（虚拟的）

pushState(JSON格式，字符串，网页的标题（null），同域的URL);
--新增一条历史记录
replaceState(JSON格式，字符串，网页的标题（null），同域的URL);
-- 替换当前视口的虚拟URL

onpopstate

触发的时机：点击浏览器的回退和前进按钮（等同JS , back() 或者 forward() ）

数据副本存储在 event.state 中。

使用场景：单页离线应用。（即便后续没有网络，也可以访问）