HTML5之WEB Storage

什么是HTML5 web storage?

使用HTML5，web页面能够使用用户的浏览器本地保存数据。

在曾经，通常我们使用cookie来保存用户数据。然而使用web存储更加安全和高速。数据不再包括在每个server请求中。仅仅存在你须要的时候。

同一时候我们也能够保存大量数据。而不影响站点的性能。

数据都保存成key/value形式，一个web页面仅仅能够訪问自己的数据。

浏览器支持

IE8+。Firefox，Chrome，Opera和Safari 5都支持这个特性。

注意IE7和更早版本号不支持这个特性。

localStorage和sessionStorage

这里有俩个新的用来保存数据的属性：

• localStorage - 没有过期时间的方式保存数据 
• sessionStorage - 保存数据到session

在使用web storage之前，检查浏览器是否支持localStorage和sessionStorage：

1. if(typeof(Storage)!=="undefined"){
2. // Yes! localStorage and sessionStorage support!
3. // Some code.....
4. }else{
5. // Sorry! No web storage support..
6. }

localStorage Object

localStorage对象保存数据没有过期时间的问题。

数据在浏览器关闭后不会删除，并且一直有效。

1. localStorage.lastname="Smith";
2. document.getElementById("result").innerHTML="Last name: "
3. + localStorage.lastname;

在线演示

代码说明：

• 创建了一个localStorage 键值对，使用key="lastname"。 value="Smith" 。
• 得到lastname相应的值，并且赋予id=result的元素

小技巧：键值对会以字符串方式存储。记住在必要的时候将他们转为其它格式

以下的样例计算了一个用户点击按钮的次数。

在这段代码中，将会把值转化为数字，这样能够使用加法：

1. if (localStorage.clickcount){
2. localStorage.clickcount=Number(localStorage.clickcount)+1;
3. }else{
4. localStorage.clickcount=1;
5. }
6. document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

在线演示

sessionStorage对象

sessionStorage对象和localStorage对象相似，除了保存的数据仅仅在当前session中有效。数据将会在用户关闭浏览器窗体时失效。

以下代码在当前的session中计算了用户点击的次数：

1. if (sessionStorage.clickcount){
2. sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
3. }else{
4. sessionStorage.clickcount=1;
5. }
6. document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";