目录
客户端存储数据
1. storage类型
Storage 类型提供最大的存储空间(因浏览器而异)来存储名值对儿。有如下方法：
| 方法名 | 描述 |
|---|---|
| key(index) | 获取index位置处的值的名字 |
| setItem(name, value) | 为指定的name设置一个对应的值 |
| getItem(name) | 根据指定的名字 name 获取对应的值 |
| removeItem(name) | 删除由name指定的名值对 |
| clear() | 删除所有值；Firefox 中没有实现 |
HTML5 提供了两种在客户端存储数据的新方法：
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
2. sessionStorage 对象
sessionStorage 对象存储特定于某个会话的数据 ，也就是该数据只保持到浏览器关闭。
2.1 存储数据
由于 sessionStorage 对象其实是 Storage 的一个实例，所以可以使用 setItem()或者直接设置新的属性来存储数据。
- 使用方法存储数据
sessionStorage.setItem("name", "Gates");- 使用属性存储数据
sessionStorage.book ＝ ” Professional JavaScript " ;2.2 访问数据
sessionStorage 中有数据时，可以使用 getItem()或者通过直接访问属性名来获取数据
- 使用方法读取数据
var name = sessionStorage.getItem("name");- 使用属性读取数据
var book = sessionStorage.book;2.3 迭代sessionStorage中的值
- 结合length属性和key()方法
for (var i = 0; i < sessionStorage.length; i++) {
var key = sessionStorage.key(i);
var value = sessionStorage.getItem(key);
alert(key + "=" + value);
}首先通过key(方法获取指定位置上值的名字，再通过getItem()方法找出对应该名字的值。
- 使用for-in循环
for (var key in sessionStorage) {
var value = sessionStorage.getItem(key);
alert(key + "=" + value);
}每次经过循环的时候，key 被设置为 sessionStorage 中下一个名字，此时不会返回任何内置方法或 length 属性。
2.4 删除数据
- 使用delete 操作符删除对象属性
delete sessionStorage.name; - 使用removeItem()方法
sessionStorage.removeItem("book");实例1:
如何创建并访问一个 sessionStorage：
if (typeof(Storage) !== "undefined") {
//Store
sessionStorage.setItem("lastname", "Gates");
//Retrieve
document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "抱歉，您的浏览器不支持Web 存储";
}实例2:
对用户在当前 session 中访问页面的次数进行计数：
if (sessionStorage.pagecount) {
sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
} else {
sessionStorage.pagecount = 1;
}
document.write("Visits: " + sessionStorage.pagecount + " times(s)");说明：
- session storage的存储空间大小，需参照浏览器厂商的具体实现。
- 通过sessionStorage所存储数据的生命周期，和Session类似，关闭浏览器（或标签页）后数据就不存在了。但刷新页面或使用“前进”、“后退按钮”后sessionStorage仍然存在。
- sessionStorage每个窗口的值都是独立的（每个窗口都有自己的数据），它的数据会随着窗口的关闭而消失，窗口间的sessionStorage也是不可以共享的。
- setItem中的key、value使用的是字符串的形式进行存储的。也就是说如果有如下的代码：setItem(‘count’, 1);通过getItem(‘count’) + 5 得到的将不是预期的6(整数)，而是’16’(字符串)。
- 再次使用setItem设置已经存在的key的value时，新的值将替代旧的值。
- 当存储中的数据发生改变时，会触发相应的事件（window.onstorage），但目前各浏览器对此事件的支持并不完善，暂时可以忽略。
3. globalStorage 对象
目的是跨越会话存储数据，但有特定的访问限制。要使用 globalStorage，首先要指定哪些域可以访问该数据。
3.1 存储数据
- 使用属性存储数据
globalStorage["wrox.com"].name = "Nike";3.2 访问数据
sessionStorage 中有数据时，可以使用 getItem()或者通过直接访问属性名来获取数据
- 使用方法读取数据
var name = globalStorage["wrox.com"].name;在这里，访问的是针对域名wrox.com的存储空间。globalStorage 对象不是 Storage 的实例，而具体的globalStorage[”wrox.com ”]才是。这个存储空间对于wrox .com及其所有子域都是可以访问的。
3.3 删除数据
- 使用delete 操作符删除对象属性
delete globalStorage["wrox.com"].name; - 使用removeItem()方法
globalStorage["wrox.com"].removeItem("book");如果不使用removeItem()或者delete删除，或者用户未清除浏览器缓存，存储在globalStorage属性中的数据会一直保留在磁盘上。这让 globalStorage 非常适合在客户端存储文件或者长期保存用户偏好设置。
4. localStorage 对象
localStorage对象在修订过的HTML5规范中作为持久保存客户端数据的方案取代了globalStorage。与globalStorage不同，不能给localStorage指定任何访问规则；规则事先就设定好了。要访问同一个 localStorage 对象，页面必须来自同一个域名(子域名无效)，使用同一种协议，在同一个端口上。这相当于 globalStorage [location .host]
4.1 存储数据
由于 localStorage 对象是 Storage 的一个实例，所以可以使用 setItem()或者直接设置新的属性来存储数据。
- 使用方法存储数据
localStorage.setItem("name", "Gates");- 使用属性存储数据
localStorage.book ＝ ” Professional JavaScript " ;4.2 访问数据
localStorage中有数据时，可以使用 getItem()或者通过直接访问属性名来获取数据
- 使用方法读取数据
var name = localStorage.getItem("name");- 使用属性读取数据
var book = localStorage.book;4.3 迭代localStorage中的值
- 结合length属性和key()方法
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
var value = localStorage.getItem(key);
alert(key + "=" + value);
}首先通过key(方法获取指定位置上值的名字，再通过getItem()方法找出对应该名字的值。
- 使用for-in循环
for (var key in localStorage) {
var value = localStorage.getItem(key);
alert(key + "=" + value);
}每次经过循环的时候，key 被设置为 localStorage 中下一个名字，此时不会返回任何内置方法或 length 属性。
4.4 删除数据
- 使用delete 操作符删除对象属性
delete localStorage.name; - 使用removeItem()方法
localStorage.removeItem("book");兼容只支持globalStorage的浏览器：
function getLocalStorage() {
if (typeof localStorage == "object") {
return localStorage;
} else if (typeof globalStorage == "object") {
return globalStorage[location.host];
} else {
throw new Error("Local storage not available")
}
}实例1:
如何创建和访问 localStorage：
if (typeof(Storage) !== "undefined") {
//Store
localStorage.setItem("lastname", "Gates");
//Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "抱歉，您的浏览器不支持Web 存储";
}实例2：
对用户访问页面的次数进行计数：
if (localStorage.pagecount) {
localStorage.pagecount = Number(localStorage.pagecount) + 1;
} else {
localStorage.pagecount = 1;
}
document.write("Visits: " + localStorage.pagecount + " times(s)");说明：
- 只把数据存储在了客户端使用，不会发送的服务器上（除非你故意这样做）。
- 而且对于某一个域下来说，localstorage是共享的（数据可跨越多个窗口，无视当前会话，被共同访问、使用）。
- localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
5. storage事件
对Storage对象进行任何修改，都会在文档上触发storage事件。当通过属性或 setItem()方法保存数据，使用delete操作符或 removeItem()删除数据，或者调用clear()方法时，都会发生该事件。这个事件的 event 对象有以下属性。
| 属性 | 描述 |
|---|---|
| domain | 发生变化的存储空间的域名 |
| key | 设置或者删除的键名 |
| newValue | 如果是设置值，则是新值；如果是删除键 ，则是 null |
| oldValue | 键被更改之前的值 |
实例1：
侦听storage事件：
EventUtil.addHander(document, "storage",function() {
alert("Storage changed for" + event.domain)
})