什么是HTML Web Storage？

Web Storage是HTML5很大的一个创新，它可以实现数据在前端浏览器内进行存储。

HTML5以前，这些数据都必须存在每一次web请求的cookies中。而Web Storage则提供了不一样的可能，Web Storage不仅可以存储更大量的数据，而且更加安全，同时让每一次web请求更加轻量快捷。（整体来说，Web Storage比Cookies表现得更加优秀，但是并非所有场景下Web Storage都能取代Cookies）

与Cookies不同的是，Web Storage可存储的数据量会大很多，一般来说，至少5MB，而且这些数据就是存在浏览器内，不需要依托与服务器之间的web请求。

Web Storage虽然是存在浏览器端的，但是它是独立而安全的，不同域名与协议的Storage空间是分离独立的，网站网页只能读取属于自身域名和协议的那一部分存储空间，所以不同域名之间是独立而安全的。

浏览器兼容性

下面列出的是各类型浏览器支持HTML Web Storage的最低版本。

API
Web Storage	4.0	8.0	3.5	4.0	11.5

HTML Web Storage 对象

HTML Web Storage为客户端（即浏览器）存储数据提供了两个对象：

• window.localStorage - 存储数据（数据没有过期时间，可永久存储）
• window.sessionStorage - 临时存储数据 （当浏览器选项卡关闭，存储的数据就会丢失）

另外，在使用Web Storage前建议检查一下浏览器是否兼容Web Storage：

if (typeof(Storage) !== "undefined") {
    // 浏览器支持Web Storage
    // 可以开始干活了
} else {
    // 浏览器不支持Web Storage
    // 用这么过时的浏览器，记得要把用户骂一顿
}

localStorage 对象

localStorage对象存储数据是不会过期丢失的，浏览器关闭，系统重启，都不会有问题。（不过如果把电脑砸了，那数据肯定就没有了；以及用户手动彻底清除浏览器数据，那数据肯定也没了；地球爆炸了，数据也肯定没有。）

// 存储数据
localStorage.setItem("zhuan", "fou");
// 测试提取数据
alert( localStorage.getItem( "zhuan" ) );

运行一下

上面的例子很简单，利用setItem方法进行赋值，利用getItem进行值的提取，存储的数据都是键值配对的。当然，既然是对象，通过另外一种方式来存储与提取数据，如下所示：

// 存储数据
localStorage.zhuan = "fou";
// 测试提取数据
alert( localStorage.zhuan );

运行一下

如果想要删除数据，可如下操作：

localStorage.removeItem( "zhuan" );

一般来说利用localStorage存储这种键值配对的数据时，这些数据都是以字符串的形式进行存储；因此，如果涉及其它类型的数据，请注意好变量类型的转换。如下例所示，虽然存进去的是整数，但是因为会自动被转换成字符串类型进行存储，所以，每次累加时要把提取出来的数据通过内置的Number函数把字符串类型转换为整数类型：

if (localStorage.clickcount) {
    // 不是第一次点击了，现有计数器上加1
    localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
    // 第一次点击，赋值为1
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "汝总共点了我 " + localStorage.clickcount + " 次，汝等着，贫道这就去叫人，一只冲天炮，千军万马来相见……";

运行一下

sessionStorage 对象

sessionStorage对象和localStorage对象的用法几乎是一样的，唯一不同的点就是，存在sessionStorage中的数据会因为浏览器选项卡的关闭而被清除。例如，将上面那个按钮点击的计数器改成sessionStorage版本：

if (sessionStorage.clickcount) {
    // 不是第一次点击了，现有计数器上加1
    sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
    // 第一次点击，赋值为1
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "汝总共点了我 " + sessionStorage.clickcount + " 次，汝等着，贫道这就去叫人，一只冲天炮，千军万马来相见……";

运行一下

---

Web Sql（已废弃）

HTML5不仅能让用户在前端存储数据，还提供了前端运行数据库的可能性；Web Sql就是干这个勾当的；但是web Sql已经被w3c组织所抛弃，HTML5标准中并不包括web Sql，总之web Sql目前看来，中短期内没有前景；因此，汝不用学习，只要知道这家伙是干什么的就ok啦。

W3C组织在2010年11月18日废弃了webSql。转而重点发展一个叫作indexedDB的key/value的数据库。据说Chrome浏览器的indexedDB的底层是基于levelDB的。（ levelDB的是谷歌开源的nosql数据库，非常高效 ）但是，不管是web Sql，还是indexedDB，都不推荐去学习，用于学习的精力是有限的，对于尚未成熟的技术领域，若不是作为专业的细分方向，不推荐耗费时间深入学习，了解到即可。