HTML5 数据存储

简介

在HTML5之前，本地存储的唯一方案是使用 cookie^[1]，缺点如下：

需要处理过期数据
同一个域中的每一次请求都会携带所有的 cookie
安全性

HTML5 新增了更好、更便捷的本地存储功能^[2]。它们一般具有如下优点：

这些数据可以无限期地保存在用户计算机上
不会主动跟随 HTTP 请求发送到服务端
更大的存储空间
方便使用 JavaScript 操作

对比如下:

存储类型	JS对象	作用和特点
本地存储	localStorage	用于长期保存网站的数据
会话存储	sessionStorage	用于临时保存针对一个窗口（标签页）的数据。在用户关闭窗口或标签页前，这些数据存在，之后会被删除，不受页面导航影响
数据库	indexDB^[3]	创建离线应用，优化性能和改进本地存储

无论本地存储还是会话存储，都是与网站所在的域联系在一起的。如果是不同的网站页面，就不能同时访问一个数据源，类似地，如果使用不同的用户名登录，那么存取的也将是不同的本地数据。

存储/读取数据 API：

使用键值对的方式来操作 storage 对象

1
2
3
4
5


localStorage.setItem(key, value);
localStorage["key"] = value;

value = localStorage.getItem(key);
value = localStorage["key"]

删除/清空数据API：

1
2
3


localStorage.removeItem("key");

sessionStorage.clear();

遍历所有的数据项：

1
2
3
4
5
6
7


for(var i = 0; i < localStorage.length; i++) {
    var key = localStorage.key(i);

    var item = localStorage.getItem(key);

    console.log(item);
}

注意：在通过 localStorage 和 sessionStorage 保存数据的时候，该数据会自动被转换为文本字符串。

处理数值的方法：

1
2
3


var a = Number(localStorage.getItem("key"));

a += 10;

处理日期的方法：

1
2
3
4
5
6
7


var today = new Date();

var todayString = today.getFullYear() + "/" + today.getMonth() + "/" + today.getDate();

sessionStorage.setItem("today", todayString);

today = new Date(sessionStorage.getItem("today"));

当我们处理数值和日期时，可以使用对象固有的转换方法，但是有很多对象不能如此简单的使用这些方法，尤其是对于自定义对象。这时，我们就可以通过序列化的方法来实现。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


function Person(name, age) {
    this.name = name;
    this.age = age;
}

var sharry = new Person("sharry", 24);

sessionStorage.setItem("sharry_info", JSON.stringify(sharry));

sharry = JSON.parse(sessionStorage.getItem("sharry_info"));

响应存储变化：

Web 存储提供了在不同浏览器窗口间通信的机制。具体来说，就是在本地存储或会话存储发生变化时，其他查看同一页面或同一站点中其他页面的窗口就会触发 window.onStorage 事件。如果同时打开了同一站点的多个页面，那么这些页面会依次发生 onStorage 事件，只有导致变化的页面不会发生该事件。

session 是存储于服务端的。
Web 存储指的是将数据保存在客户端，而不是 Web 上。
一个 IndexedDB 数据库属于某个个人，使用特定的电脑和特定的浏览器访问特定的网站，网页都会生成一个新的 IndexedDB 数据库。