HTML5-WebStorage学习笔记

最近一直在研究HTML5的一些新的特性，买了本书，然后也看了看W3C上的讲解，干脆就把学习的笔记写在博客中跟大家一起分享下。

HTML5本地存储规范中，定义了2个重要的API：WebStorage和本地数据库WebSQLDatabase。接下来我会重点讲述WebStorage的基本用法。


WebStorage提供了两种存储类型API接口：sessionStorage和localStorage
sessionStorage的生命周期在会话期间内有效，而localStorage就存储在本地，并且数据是永久的，除非用户或程序对其执行删除操作。


目前所有的主流浏览器都在一定的程度上支持HTML5的WebStorage特性。

可以使用下面的代码测试下：

			if(window.localStorage){
				alert("本浏览器支持localStorage");
			}
			if(window.sessionStorage){
				alert("本浏览器支持sessionStorage");
			}

localStorage 作为HTML5本地存储WebStorage特性的API之一，主要作用时将数据保存在客户端中，而一般的客户端是指用户的计算机。

在安全性方面，localStorage是域内安全的，即localStorage是基于域的，任何在该域内的所有页面，都可以访问localStorage数据。

但是存在一个问题，就是各个浏览器厂商之间的数据是独立的，也就是说，如果在Firefox中的localStorage存储的数组，在Chrome中就无法读取。同样，由于localStorage数据是保存在用户的设备中的，因此在同一个应用程序在不同设备上保存的数据是不同的。

现在来看看HTML5规范中定义的Storage的API：

interface Storage{
    readonly attribute unsigned long length;
    DOMString? key(in unsigned long index);
    getter DomString getItem(in DOMString key);
    setter creator void setItem(in DOMString key,in DOMString value);
    delete void removeItem(in DOMString key);
    void clear();
}

从规范定义的接口来看，接口数量并不多，只有length是属性，其余都是方法。其中setItem和getItem互为以对get/set。

removeItem方法的主要作用是删除一个键值对。

clear的作用是删除所有的键值对。

接下来我们将通过一些简单的列子探讨如何使用Storage个各个API。

首先如何存储一个数据？  代码如下：

localStorage.setItem("name","姓名");

这是在本地客户端存储一个字符串类型的数据，然后可以通过getItem方法读取key为name的值：

localStorage.getItem("name");

还有一种方法可以读取，加入localStorage存储的列表中只存在一个Item，那么就可以通过索引值index去读取那么的值：

localStorage.key(1);

同样，通过length属性可以知道localstorage中存储多少个键值对，而removeItem,clear,都属于删除item的操作：

localStorage.removeItem("name");

localStorage.clear();

事实上，Storage除了可以存储字符串，还能存储JSON格式的数据。

//存储userData数据
localStorage.setItem("userData",JSON.stringify(userData));
//读取userdata数据并赋值给新变量newUserData
var newUserData = JSON.parse(localStorage.getItem("userData"));
//删除本地存储的item
localStorage.removeItem("userData");
//输出对象
alert(newUserData);

上面的代码中使用了JSON.stringify方法吧字符串格式转换成JSON对象存储到本地，读取数据时则通过JSON.parse方法吧JSON对象转换成原来的数据格式。

接下来我们再看看对JSON数据更新操作的影响情况

//定义json格式的字符串
var userData ={
	name:"Sankyu Name",
	account:"sankyu",
	level:1,
	disabled:true
};
//存储userData数据
localStorage.setItem("userData",JSON.stringify(userData));
//读取userdata数据并赋值给新变量newUserData
var userData = JSON.parse(localStorage.getItem("userData"));
//对userData内的数据设置新值
JSON.parse(localStorage.getItem("userData")).name = "new Sankyu Name";
userData.name = "new Sankyu Name";
//输出new Sankyu Name
alert(userData.name);
//输出Sankyu Name
alert(JSON.parse(localStorage.getItem("userData")).name);

通过上面的代码可以发现，首先输出的new Sankyu Name  然后再输出Sankyu Name

第二次输出的内容并没有我们预料到的那样修改为new Sankyu Name

因此可以知道虽然代码中通过localStorage存储了JSON格式的数据，但是无法直接通过点的语法来进行修改数据。

而且将JSON数据赋给一个新的变量并修改其中的数据后，也没有对localStorage中item有任何的更新痕迹。

现在我们以上面的未基础进行了一些修改：

//定义json格式的字符串
var userData ={
	name:"Sankyu Name",
	account:"sankyu",
	level:1,
	disabled:true
};
//存储userData数据
localStorage.setItem("userData",JSON.stringify(userData));
//读取userdata数据并赋值给新变量newUserData
var userData = JSON.parse(localStorage.getItem("userData"));
userData.name = "new Sankyu Name";
localStrage.setItem("userData",JSON.stringify(userData));
//输出new Sankyu Name
alert(userData.name);
//输出Sankyu Name
alert(JSON.parse(localStorage.getItem("userData")).name);

这样就能达到我们预计的效果了。

sessionStroage同样作为HTML5本地存储WebStorage特性之一的另一个API，主要是将数据保存到会话中，其原理和服务器语言的session功能类似。

sessionStorage存储的生命周期只保存在存储它的当前窗口或由当前窗口新建的新窗口，直到相关联的标签页关闭。

相信大家对这都有一定的了解，我就不做更多的介绍了，属性和方法基本上和localStorage相同。