媒介
本文起首引见web storage和Cookie的对照，诠释web storage的上风；随后指出如何运用插firebug插件的扩大firestorage-plus检察web storage；然后引见storage的要领和属性，sessionStorage和localStorage的要领和属性继续自storage；末了引见sessionStorage和localStorage。
0 为何引入web storage（对照Cookie）？
cookie不适合大批数据的存储（Cookie的大小是受限的），因为它们由每一个对服务器的要求来通报（每次你要求一个新的页面的时刻cooki都邑被发送过去），这使得cookie 速率很慢而且效力也不高。web storage的目标就是庖代Cookie举行大批的当地数据存储，个中sessionStorage不能举行跨会话存储，这能够运用localStorage填补。
1 怎样运用firebug检察web storage？
一款针对firebug插件的扩大：firestorage-plus：
https://addons.mozilla.org/en…
一篇相干的引见：
http://www.softwareishard.com…
firestorage-plus的简朴测试：
essionStorage.setItem("name", "Nicholas");
console.log(sessionStorage.name);
在firebug的DOM菜单找到localStorage和sessionStorage选项，能够检察web storage，如许检察给出的信息有限。
也能够经由过程firestorage-plus举行检察：
选中某一个storage并右键，以至能够对其举行编辑，可见这个插件确切比较简朴好用。
2 storage的要领和属性
关于web storage，只须要相识两个对象：localStorage和sessionStorage，它们都是storage的实例，因此会继续storage的要领和属性，包含：
clear()： 删除一切值； Firefox 中没有完成 。
getItem(name)：依据指定的名字 name 猎取对应的值。
key(index)：取得 index 位置处的值的名字。
removeItem(name)：删除由 name 指定的名值对儿。
setItem(name, value)：为指定的 name 设置一个对应的值。
length 属性：推断有若干名值对儿存放在 Storage 对象中。
须要注重，web存储的数据范例都是字符串，假如须要其他范例，须要自行转换。
3 sessionStorage 对象
sessionStorage 对象存储特定于某个会话的数据，也就是该数据只坚持到浏览器封闭。这个对象就像会话 cookie，也会在浏览器封闭后消逝。存储在 sessionStorage 中的数据能够逾越页面革新而存在，同时假如浏览器支撑，浏览器崩溃并重启以后依旧可用（Firefox 和 WebKit 都支撑， IE 则不可）。存储在 sessionStorage 中的数据只能由最初给对象存储数据的页面接见到，所以对多页面运用有限定。
依据sessionStorage继续自storage的要领和属性，能够有以下操纵：
//运用要领存储数据
sessionStorage.setItem("name", "Nicholas");
//运用属性存储数据
sessionStorage.book = "Professional JavaScript";
sessionStorage 中有数据时，能够运用 getItem()或许经由过程直接接见属性名来猎取数据。
//运用要领读取数据
var name = sessionStorage.getItem("name");
//运用属性读取数据
var book = sessionStorage.book;
还能够经由过程连系 length 属性和 key()要领来迭代 sessionStorage 中的值，以下所示。
sessionStorage.setItem('name', 'Nicholas');
sessionStorage.setItem('age', '20');
sessionStorage.setItem('height', '180cm');
for (var i = 0, len = sessionStorage.length; i < len; i++) {
var key = sessionStorage.key(i);
var value = sessionStorage.getItem(key);
console.log(key + '=' + value);
}
还能够运用 for-in 轮回来迭代 sessionStorage 中的值：
for (var key in sessionStorage){
var value = sessionStorage.getItem(key);
alert(key + "=" + value);
}
要从 sessionStorage 中删除数据，能够运用 delete 操纵符删除对象属性，也可挪用
removeItem()要领。
//设置四个值
sessionStorage.setItem('name', 'Nicholas');
sessionStorage.setItem('age', '20');
sessionStorage.setItem('height', '180cm');
sessionStorage.setItem('book', 'ring of the king');
//运用 delete 删除一个值——在 WebKit 中无效
delete sessionStorage.name;
//运用要领删除一个值
sessionStorage.removeItem("book");
在firebug中能够看到只剩两个值：
4 localStorage 对象
localStorage 中的数据保留到经由过程 JavaScript 删除或许是用户消灭浏览器缓存。要接见同一个 localStorage 对象，页面必需来自同一个域名（子域名无效），运用同一种协定，在同一个端口上，这类似于Ajax的同源战略。
因为 localStorage 是 Storage 的实例，所以能够像运用 sessionStorage 一样来运用它。下面是一些例子。
//运用要领存储数据
localStorage.setItem("name", "Nicholas");
//运用属性存储数据
localStorage.book = "Professional JavaScript";
//运用要领读取数据
var name = localStorage.getItem("name");
//运用属性读取数据
var book = localStorage.book;
一般来说，对存储空间大小的限定都是以每一个源（协定、域和端口）为单元的。换句话说，每一个源都有牢固大小的空间用于保留本身的数据。考虑到这个限定，就要注重剖析和掌握每一个源中有若干页面须要保留数据。
关于 localStorage 而言，大多数桌面浏览器会设置每一个泉源 5MB 的限定。 Chrome 和 Safari 对每一个泉源的限定是 2.5MB。而 iOS 版 Safari 和 Android 版 WebKit 的限定也是 2.5MB。
对 sessionStorage 的限定也是因浏览器而异。有的浏览器对 sessionStorage 的大小没有限定，但 Chrome、 Safari、 iOS 版 Safari 和 Android 版 WebKit 都有限定，也都是 2.5MB。 IE8+和 Opera 对sessionStorage 的限定是 5MB。
