离线存储发展史
HTML5 之前，Cookie 是唯一在 HTML 标准中用于离线存储的技术，但是 Cookie 有一些不太友好的特征限制了它的应用场景：
- Cookie 会被附加在 HTTP 协议中，每次请求都会被发送到服务器端，增加了不必要的流量损耗；
- Cookie 大小限制在 4kb 左右（不同的浏览器有一些区别），对于一些复杂的业务场景可能不够；
这两个缺点在 Localstorage 中得到了有效的解决，Localstorage 是持久化的本地存储，除非主动删除数据，否则数据永远不会过期；
兼容性
-
截止目前为止，已经有大部分浏览器已经支持 Localstorage，包括 IE8；
![]( "兼容性")
-
具体浏览器是否支持 Localstorage 可以通过简单的 JavaScript 代码判断；
function testLocalstorage() { if (typeof window.localStorage == "object") return true; // 判断 localstorage 对象是否定义 else return false; // 未定义返回 false }
API 接口
Localstorage 是一个简单的 key - value 形式的数据库，以键值对的方式存储，所以提供的接口主要是基于 k - v 的操作；
建议使用 JSON.stringify() 将数据转化成字符串方式再存储；
存储数据
// 设置 key=test 的值为 1
window.localStorage.setItem("test", 1);
// 设置 key=test 的值为 1，localstorage 可以作为全局对象处理
localStorage.setItem("test", 1);
// 可以通过属性值的方式直接操作 localstorage 的 key
localStorage.test = 1;
读取数据-按键值
// 获取 key=test 的值
var a = window.localStorage.getItem("test");
// 可以直接通过对象属性的方式操作
var a = localStorage.test;
读取数据-按位置
// 可以根据 key 在 localstorage 的位置的方式操作，类似操作 JavaScript 的 array 的方式
var a = window.localStorage.key(0);
删除数据
// 删除 key=test 的值
window.localStorage.removeItem("test");
// 可以通过赋空值的方式等价操作
window.localStorage.test = '';
整体清空
// clear 函数清空整个 localstorage
window.localStorage.clear();
适用场景及局限性
局限性
5M 容量依然小，MySQL 随便一个表加上索引很容易超过 5M；
不能跨域名访问，同一个网站可能会牵涉到子域名；
不能存储关系型数据；
不能搜索；
本质上是对字符串的读取，如果存储内容多的话，会消耗内存空间，会导致页面变卡；
无法像 Cookie 一样设置过期的时间（可以自己手动实现）；
只能存入字符串，无法直接存对象；
适用场景
数据关系简单明了；
数据量小；
数据无需持久化存储且不需要考虑安全性；
无需跟服务器交互；
sessionStorage
sessionStorage 和 localStorage 使用方法基本一致，唯一不同的是生命周期，一旦页面（会话）关闭，sessionStorage 将会删除数据；
sessionStorage 操作与 localStorage 相同；
面试题
监听其他页面存储事件
当 localstorage 发生改变时，可以通过监听 storage 事件作出相应的业务处理
当本页操作（新增、修改、删除）了 localStorage 的时候，本页面不会触发 storage 事件，但是同域下别的页面会触发 storage 事件；
if (window.addEventListener) {
window.addEventListener("storage", function(e){
//业务处理
}, false);
} else {
window.attachEvent("onstorage", function(e){
//业务处理
});
}
监听本页面存储事件
使用自定义事件实现（两个界面同源），火狐会失效：
<!-- a.html -->
<script>
// 重写 localStorage.setItem
function dispatchEventStroage() {
const signSetItem = localStorage.setItem;
localStorage.setItem = function (key, val) {
let setEvent = new Event('setItemEvent');
setEvent.key = key;
setEvent.newValue = val;
window.dispatchEvent(setEvent);
signSetItem.apply(this, arguments);
}
}
dispatchEventStroage();
// localStorage 的监听事件
window.addEventListener("setItemEvent", function (e) {
alert(e.newValue);
});
// 修改 localStorage 的值
localStorage.setItem("name", "wang");
</script>
<!-- b.html -->
<script>
// 当 a.html 修改 localStorage 时，该事件被触发
window.addEventListener("storage", function (e) {
alert(e.newValue);
});
</script>
API 篇：requestAnimationFrame
上一篇
