HTML 5 存储

HTMl5存储分为三部分：

本地存储(localStorage && sessionStorage)

离线存储(application cache)

IndexedDB 和 Web SQL

1. 本地存储(localStorage && sessionStorage)

localStorage 对象和 sessionStorage 对象使用方法基本相同，它们的区别在于作用的范围不同。sessionStorage 用来存储与页面相关的数据，它在页面关闭后无法使用。而 localStorage 则持久存在，在页面关闭后也可以使用。

API:

length：返回当前存储在 Storage 对象中的键值对数量。

key(index)：返回列表中第 n 个键的名字。Index 从 0 开始。

getItem(key)：返回指定键对应的值。

setItem(key, value)：存入一个键值对。

removeItem(key) ：删除指定的键值对。

clear()：删除 Storage 对象中的所有键值对。

以 sessionStorage 为例：

存储键值对：

sessionStorage.setItem(“key1”, value1);

通过键名来读取值：

var value1 = sessionStorage.getItem(“key1”);

存储形式:

key->value 的形式。下图是百度首页的localStorage

存储大小：

官方给出的是5M。

使用 HTML5 Storage 需要注意的几点

1. 保存在 Storage 对象的数据类型

当使用 DOM Storage 进行本地存储时，任何数据格式在 Storage 对象中都以字符串类型保存，所以如果保存的数据不是字符串，在读取的时候需要自己进行类型的转换。

2. 空间大小

HTML5 的建议是每个网站提供给 Storage 的空间是 5MB，一般来说足够存字符串。如果存入的数据太大，有些浏览器如 Chrome 会抛出 QUOTA_EXCEEDED_ERR 异常。所以虽然HTML 5 Storage 提供的空间比 cookie 要大很多，但在使用需要注意限制。

3. 安全性

一般不要在客户端存储敏感的信息，使用 localStorage、sessionStorage 等在客户端存储的信息都非常容易暴露。应该在完成数据存储后使用 clear 或者 removeItem 方法清除保存在 Storage 对象中的数据。

4. 存储事件驱动

如果想在存储成功或修改存储的值时执行一些操作，可以用 DOM Storage 接口提供的事件。可以使用如下方法注册事件：

window.addEventListener(“storage”, handleStorageEvent, false);

注册完存储事件后，当 sessionStorage 或者 localStorage 对象的值发生改变时，会触发 handleStorageEvent 函数，在页面显示发生改变的键和改变之前与之后的值。

 // 显示存储事件的相关内容
 function handleStorageEvent(e) { 
    document.write(“key” + e.key + “oldValue” + e.oldValue + “newValue” + e.newValue); 
 } 
 // 添加存储事件监听
 window.addEventListener(“storage”, handleStorageEvent, false);