HTML5本地存储规范中，定义了两个重要的API: Web Storage和本地数据库WebSQL Database。本章重点点讲述Web Storage的基本用法。
对于本地存储的另外—个HTML5规范——本地数据库Web SQL Database．我们在这里不做详细介绍，如果对本地数据库有兴趣，可自行阅读相关书籍。
本地存储Web Storage实际上是HTML4的Cookies存储机制的一个改进版本，然而两种机制的功能又不相同。Web Storage的作用是在网站中把有用的信息存储到本地的计算机或移动设备上，然后根据实际需要从本地读取信息。
Web Storage提供了两种存储类型API接口：sessionStorage和localStorage。至于它们的生命周期，sessionStorage在会话期间内有效，而localStorage就存储在本地，并且数据存储是永久的，除非用户或程序对其执行删除操作。
我们在接下来会详细讲解如何使用Web Storage的两种存储类型API接口。
移动设备的支持
目前所有的主流浏览器都在一定程度上支持HTML5的Web Storage特性。从图3-1中可以看出，基本上所有现代浏览器都已经支持Web Storage。我们再来看一下图3-2中在移动设备上的浏览器支持情况如何
从图3-2可以看到．Android平台及iOS平台各自的浏览器都基本上支持Web Storage本地存储特性。目前市场上的移动设备，除了Android手机和iPhone手机外，越来越多的平板电脑面世，而且基本上依赖这两种平台，对于实现Web Storage技术，我们几乎不需要考虑浏览器是否支持Web Storage。当然，从代码的严谨性来说，建议最好在使用前先检查判断浏览器是否支持Web Storage，例如如下代码：
if(window.localStorag){
//游览器支持localStorage
}
if(window. sessionStorage){
//浏览器支持sessionStorage
}
复制代码
需要注意的是，Opera公司发布的Opera Mobile和Opera Mini两款移动Web浏览器虽然都适用于手机浏览器，但两者是有区别的。Opera Mobile仅用于Android智能手机，而opera mini则适用于几乎所有的手机。由于Opera Mini的渲染过程在服务器端，因此对HTML5的支持并不理想。Opera系到的移动浏览器虽然在对HTMI5的支持上稍显逊色，但完全不影响iOS和Android平台系列的支持，因此完全可以放心地使用Web Storage特性。
localStorage作为HTML5本地存储Web Storage特性的API之一，主要作用是将数据保存在客户端中，而客户端一般是指用户的计算机。在移动设备上，由于大部分浏览器都支持Web Storage特性，因此在Android和iOS等智能手机上的Web浏览器都能正常使用该特性。
localStorage保存的数据，一般情况下是永久保存的，也就是说只要采用localStarage保存信息，数据便一直存储在用户的客户端中。即使用户关闭当前Web浏览器后重新启动，数据仍然存在。直到用户或程序明确指定删除，数据的生命周期才会结束。
在安全性方面．localStorage是域内安全的，即localStorage是基于域的，任何在该域内的所有页面，都可以访问localStorage数据。但仍然存在一个问题，就是各个浏览器厂商的浏览器之间的数据是各自独立的。也就是说，如果在Firefox中使用locaIStorage存储一组数据，在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 DOMStrine key. in DOMString value);
deleter void removeItem-(in DOMString key);
vaid clear();
);
复制代码
按规范定义的接口来看，接口数量并不多，只有length是属性，其余都是方法。其中setItem和getItem互为一对setter和getter方法，如果有面向对象知识的你，看到这种方法名的定义，必定不会感到陌生。
removeItem方法的主要作用是删除一个key/Value（键值）对。clear方法的作用则是删除所有的键值对。
接下来我们将通过一些简单的例子探讨如何使用Storage的各个API。首先，如何存储一个数据？
如下代码所示：
localStorage.setItem("name","非一般的黑客");
上述代码的意思是在本地客户端存储一个字符串类型的数据，然后可以通过getItem方法读取key值为name的值，如以下代码：
localStorage.getItem("name");
通过getItem就可以读取已知key值的value，不过还有一种方法可以读取“name”的value。
假如localStorage存储的列表中只存在一个item，那么就可以通过索引值index去读取name的值，如下代码：
//等价于localstorage.getItem("name");
localStorage.key(1);
同样，通过length属性可以知道localStorage中存储着多少个键值对。而removeItem和clear同属于删除Item操作，接口的调用示例如以下代码所示：
//删除指定key为"name"的item
localStorage.removeItem("name");
//删除localstorage所有key/value键位对items
localStorage.clear();
以上内容通过示例介绍了如何使用Storage的API。事实上，Storage除了可以存储字符串，还能存储JSON格式的数据。
代码3-1展示了如何使用localStorage进行本地存储和读取JSON格式数据。
代码3-1 localStorage存储JSON简单数据示例
//定义JSON格式字符串
var userData={
name:"sankyu Name",
account:"sankyu"，
level:1,
disabled:true
};
//存储userData数据
localstorage.setItem("userData",JSON.stringify(userData));
//读取userdata数据并赋值给新变量newUserData
var newUserData = JSON.parse(localStorage.getItem("userData"));
//删除本地存储的item
localstorage.removeItem("userData");
//输出对象
alert(newUserData);
复制代码
上面的代码中，使用了一个JSON格式的对象。该对象是一种数据交换格式，在所有的现代浏览器中都支持，并且可以通过window.JSON或JSON的语法直接调用。对于旧浏览器或不支持该对象的浏览器来说，需要导入一个额外的JavaScript类库，该库可以从http://json.org/网站上获取到。
目前．JSON对象已经被纳入了ECMAScript 5标准中，成为下一代JavaScript语言的一部分，将来必能广泛应用到HTML5应用程序中。
在代码3-1中使用了JSON.stringify方法把字符串数据格式转换成JSON对象，存储到本地。读取数据时则通过JSON.parse方法把JSON对象转换成原来的数据格式。
接下来，再通过代码3-2看看JSON数据存储在localStorage对象内后，对JSON数据更新操作的影响情况。
代码3-2采用点语法更新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数据。而且将JSON数据赋给一个新变量并修改
其中的数据后，也没有对localStorage中的item有任何更新痕迹。
现在以代码3-2为基础，对代码稍做修改并采用另外一种方案对JSON对象进行修改，如代码3-3所示。
代码3-3采用重新设置item方案修改JSON对基数据
//定义json格式字符串
var userData = {
nama:"Sankyu Name",
account:"sankyu",
level:l,
disabled:true
};
//存储 userData数据
localStorage.setItem("userData",JSON.stringify(userData));
//读取userdata数据并赋值给新变量 newUserData
var userData = JSON.parse(localStorage.getItem("userData"));
userData.name = "new SanKyu Name";
localStorage.setItem("userData",JSON.stringify(userData));
//输出new Sankyu Name
alert(userData.name);
//输出new SanKyu name
alert(JSON.parse(localStorage.getItem("userData")).name)
复制代码
sessionStorage
sessionStorage同样作为HTML5本地存储Web Storage特性的另一个API接口,主要作用是将数据保存在当前会话中，其原理和服务器端语言的session功能类似。
sessionStorage在移动设各上与localStorage样，大部分浏览器都支持sessionStorage特性，因此在Android和iOS等智能手机上的Web浏览器中可以正常使用sessionStorage特性。
sessionStorage存储的数据生命周期只保存在存储它的当前窗口或由当前窗口新建的新窗口，直到相关联的标签页关闭，因此sessionStorage和localStorage两者的主要差异悬数据的保存时长及数据的分享方式。
sessionStorage和localStorage 一样都继承于Storage接口。因此sessionStorage的属性和方法的使用方法基本相同。例如以下代码设置和读取一组键／值对：
sessionstorage.setItem（"name","非一般的黑客"）;
sessionStorage.getitem("name");
由于sessionStorage的用法和上一节介绍的localStorage例子中展示的基本上相同，因此不做详细介绍,可以参考本节上面的内容
有话要说