Cookie
简介
在 HTML5 之前,本地存储数据一般是通过 Cookie 来完成。我们可以把 Cookie 理解为一个长度有限的字符串,服务端和客户端都能读写这个字符串,并且每次请求时,都会把 Cookie 发送到服务端。
使用场景
通常,我们可以利用这个字符串来保存记录用户登录状态的sessionid,这样登录之后服务端就能根据sessionid识别用户是否已经登录以及登录的是哪个用户。
局限性:
- 存储空间有限,最多也就是几十K的大小
- 每次请求都发送到服务器,浪费带宽
本地存储(LocalStorage)
本地存储(LocalStorage)是一种基于键值对的持久化存储方案,如果不手动清除,数据就永远不会过期,请求服务器的时候不会发送到服务端,提高请求速度。
种类
- LocalStorage
- 没有时间限制的数据存储
- 存储数据量达到几MB(5MB),各个浏览器不一致
- 在所有同源窗口中都是共享
- 本质是在读写文件,数据多的话会比较卡
- IE7及以下不支持外,其他标准浏览器都完全支持
- 不用每次请求都发送到服务器,提高请求速度
- SessionStorage
- 针对一个 session 的数据存储
- 存储数据量达到几MB(5MB),各个浏览器不一致
- 仅在当前浏览器窗口关闭前有效(适合会话验证)
- 不在不同的浏览器窗口中共享,即使是同一个页面
LocalStorage 和 SessionStorage 功能类似,区别仅仅在于数据保存时间不同。
- LocalStorage 是持久存储,如果不手动清除,数据就永远不会失效
- SessionStorage 的数据存储在窗口对象中,一旦窗口对象没了(用户关闭浏览器或标签页),数据就会丢失
基本操作
保存数据
window.localStorage.setItem("key1", "value");
window.sessionStorage.setItem("key1", "value");
获取数据
var v = window.localStorage.getItem("key1");
var v = window.sessionStorage.getItem("key1");
删除数据
window.localStorage.removeItem("key1");
window.sessionStorage.removeItem("key1");
删除所有数据
window.localStorage.clear();
window.sessionStorage.clear();
简洁操作
web Storage可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储。
window.localStorage.key1 = "hello";
window.localStorage["key1"] = "world";
遍历key
- localStorage.length:获得存储的键值对的个数
- localStorage.key(n):获得存储的第 n 个元素对的键值
var storage = window.localStorage;
for (var i=0, len=storage.length; i<len; i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}
事件
当键值改变或者clear的时候,就可以触发storage事件,如设置一个storage事件改变的监听:
if (window.addEventListener) {
window.addEventListener("storage", handleStorage, false);
} else if (window.attachEvent) {
window.attachEvent("onstorage", handleStorage);
}
function handleStorage(e) {
if (!e) {
e=window.event;
}
}
应用
- 保存一些用户配置,比如小说站点的字体大小,最近阅读,背景色等
- 在线编辑器的临时结果保存
- 但是不能保存用户敏感信息,比如密码等,因为可以通过浏览器查看到这些保存的信息,比如使用Chrome,按F12 -> Application -> Local Storage
- 而且因为是本地存储,用户随时可能清除掉数据,所以不能太过依赖