HTML 5的本地存储

1. 背景

HTML 4及之前的网页应用，都只能通过cookie来进行网站本地数据存储，但通过cookie进行数据存储有以下几点据点

1) cookies被包括在每个HTTP请求中，这样就使你的web应用速度大打折扣

2) 如果没有SSL传输的情况下，cookie在传输过程是不被加密的，因此有安全风险

3) cookie只有4KB的大小，不能存储多少内容。

所以在HTML 5中就引入了这样一种有大量存储空间，存储于客户端，不随页面刷新而消失的，不回传至服务器的本地存储服务。

在HTML 5之前，有一些技术也曾经被提出来解决用户本地存储的问题：

1. 微软在DHTML的行为中定义过userData，允许页面保存64KB数据。被信任的域名允许使用640KB数据

2. 2002年，Adobe在Flash中引入了Local Shared Objects（LSO），使Flash可以在用户本地存储100KB数据。

3. 2005年，Brad Neuberg完成了一个AJAX Massive Storage System (AMASS)，并在之后重写AMASS，结果集成在Dojo工具集中（dojox.storage）可以使用100KB本地数据，并在需要更多数据的时候提示用户以取得1MB, 10MB数据，2009年，dojox.storage可以自动检测Flash，Gears, Adobe AIR以及HTML 5在firefox中实现的一个较早原型的存储。

4. 2007年，Google发布了gears，提供了对SQLite的支持，数据可以存储在本地SQLite数据库中。

2. HTML 5中的本地存储

在HTML 5中使用本地存储，需要先检测浏览器是否支持HTML 5中的本地存储功能(在前文中有过说明和示例)。

基本的数据操作有：

localStorage.setItem
localStorage.getItem
localStorage.removeItem

还有localStorage本身的属性，比如存储内容的个数：

localStorage.length

和通过id进行数据遍历的key方法：

localStorage.key

当localStorage内的数据发生变化的时候，storage事件将被触发。通过监听storage事件可以在数据变化时触发相应的动作：

if (window.addEventListener) {
window.addEventListener("storage", handle_storage, false);
} else {
window.attachEvent("onstorage", handle_storage);
};

3. 当前localStorage的约束

1）默认情况下每个网站来源可以取得5MB的存储空间

2）HTML 5以字符串的形式存储数据，所以如果存储浮点数，精度可能会受到影响。提取数据可以过parseInt和parseFloat方法来完成

3) 当存储量超过限制大小时，QUOTA_EXCEEDED_ERR异常被触发，当前还没有浏览器可以向用户发出申请请求更多空间。

4. 其他选择

与localStorage功能相近的有WebDB，它是一个基于SQLite的数据库，用户可以通过数据库SQL语句向数据库写入和读取数据。提供了同样便利的数据存储方式。