html5 本地存储

版本：HTML5

随着Web应用的发展，需要在用户本地浏览器上存储更多的应用数据，传统的cookie存储的方案已经不能满足发展的需求，而使用服务器端存储的方案则是一种无奈的选择。HTML的Web Storage API是一个理想的解决方案。如果是存储复杂的数据，则可以借助Web SQL Database API来实现，可以使用SQL语句完成复杂数据的存储与查询。本文向大家介绍一下HTML5中的本地存储功能。

使用HTML5的Web Storage功能，可以在客户端存储更多的数据，而且可以实现数据在多个页面中共享甚至是同步。

localStorage 用以存储周期较长、多页面，以及多浏览器 session 的内数据。甚至持续到你重起浏览器或者电脑。本地存储特性被如下浏览器所支持：IE8+, Firefox 3.5+, Safari 4.0+, Chrome 2.0+ and Opera 10.5+。

浏览器支持


Internet Explorer 8 以上版本都支持

1、cookie存储数据的不足

cookie可用于在程序员间传递少量的数据，对于Web应用来说，它是一个在服务器和客户端之间来回传送文本值的内置机制，服务器可以根据cookie来追踪用户在不同页面的访问信息。正因为它卓越的表现，在目前的Web应用中，cookie得到了最为广泛的应用。

尽管如此，cookie仍然有很多不尽如人意的地方，主要表现在以下方面。

大小限制：cookie的大小被限制在4KB。在Web的富应用环境中，不能接受文件或邮件那样的大数据。
带宽限制：只要有涉及cookie的请求，cookie数据都会在服务器和浏览器间来回传送。这样无论访问哪个页面，cookie数据都会消耗网络的带宽。
安全风险：由于cookie会频繁地在网络中传送，而且数据在网络中是可见的，因此在不加密的情况下，是有安全风险的。
操作复杂：在客户端的浏览器中，使用JavaScript操作cookie数据是比较复杂的。但是服务器可以很方便地操作cookie数据。

2.使用Web Storage存储的优势

Web Storage可以在客户端保存大量的数据，而且通过其提供的接口，访问数据也非常的方便。然而，Web Storage的诞生并不是为了替代cookie，相反，是为了弥补cookie在本地存储中表现的不足。
Web Storage本地存储的优势主要表现在以下几个方面。

存储容量：提供更大的存储容量。在Firefox、Chrome、Safari和Opera中，每个网域为5MB；在IE8及以上为10MB。
零带宽：Web Storage 因为是本地存储，不与服务器发生交互行为，所以不存在带宽的占用。
编程接口：Web Storage提供了一套丰富的编程接口，使得数据操作更加方便。
独立的存储空间：每个域都有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据的混乱。

由此可见，Web Storage并不能完全替代cookie，cookie能做的事情，Web Storage不一定能做到，如服务器可以访问cookie数据，但是不能访问Web Storage数据。所以Web Storage和cookie是相互补充的，会在各自不同领域发挥作用。随着移动互联网的发展，浏览器端的富应用必然是一种趋势。

3. 会话存储（sessionStorage）和本地存储（localStorage）的区别

Web Storage包括会话存储（sessionStorage）和本地存储（localStorage）。熟悉Web变成的人员第一次接触Web Storage时，会自然的与session和cookie去对应。不同的是，cookie和session完全是服务器端可以操作的数据，但是sessionStorage和localStorage则完全是浏览器客户端操作的数据。

sessionStorage和localStorage完全继承同一个Storage API，所以sessionStorage和localStorage的编程接口是一样的。sessionStorage和localStorage的主要区别在于数据存在的时间范围和页面范围。

sessionStorage	localStorage
数据保存到储存它的窗口或者关闭标签时	数据的生命周期比窗口或者浏览器的周期长
数据只在构建它们的窗口或者标签内可见	数据可以被同源的窗口或者标签页共享

4. 检查浏览器是否支持Web Storage

放到页面中的代码：

function CheckStorageSupport()
{
	if(window.sessionStorage)
	{
		console.log("浏览器支持sessionStorage特性！");
	}
	else
	{          
              console.log("浏览器不支持sessionStorage特性！");    
	}    
	if(window.localStorage)
	{        
              console.log("浏览器支持localStorage特性！");         
	}
	else
	{  
              console.log("浏览器不支持localStorage特性！");  
	}
 }
 window.addEventListener("load",CheckStorageSupport,false);

控制台预览结果：

5. 设置和获取Storage数据

sessionStorage和localStorage作为window属性，完全继承Storage API，它们提供操作数据的方法完全相同。下面以sessionStorage属性为例进行讲解。

1、保存数据到sessionStorage

window.sessionStorage.setItem("key","value");

Key为键，value为值，setItem()表示保存数据的方法。

2、从sessionStorage中获取数据
如果知道保存到sessionStorage中的key，就可以得到对应的值。sessionStorage获取数据的基本语法如下：

value = window.sessionStorage.getItem("key");

3、设置和获取数据的其他写法

对于访问Storage对象还有更简单的方法，根据“键”和“值”的配对关系，直接在sessionStorage对象上设置和获取数据，可完全避免调用setItem()和getItem()方法。保存数据的方法也可写为如下的形式。

window.sessionStorage.key = "value";

或

window.sessionStorage["key"]="value";

获取数据的方法更加直接，可写为如下形式：

value = window.sessionStorage.key;

或

value = window.sessionStorage["key"];

对于localStorage来说，同样具有上述设置数据和获取数据的方法。

这里写图片描述
输入结果

6. Storage API的属性和方法

这里写图片描述
在使用sessionStorage和localStorage时，以上的属性和方法都可以使用，但需要注意其影响的范围。

7. 存储JSON对象的数据

1、序列化JSON格式的数据
由于Storage是以字符串保存数据的，因此在保存JSON格式的数据之前，需要把JSON格式的数据转换为字符串，称为序列化。可以使用JSON.stringify()序列化JSON格式的数据为字符串数据。使用方法如下：

var stringData = JSON.stringify(jsonObject);

以上代码把JSON格式的数据对象jsonObject序列化为字符串数据stringData。

2、把数据发序列化为JSON格式
如果把存储的Storage中的数据以JSON格式对象的方式去访问，需要把字符串数据转换为JSON格式的数据，成为反序列化。可以使用JSON.parse()反序列化字符串数据为JSON格式的数据。使用方法如下：

var jsonObject = JSON.parse(stringData);

以上代码把字符串数据stringData反序列化为JSON格式的数据对象jsonObject。
反序列化字符串为JSON格式的数据，也可以使用eval()函数，但eval()函数是把任意的字符串转换为脚本，有很大的安全隐患，但是JSON.parse()只反序列化JSON格式的字符串数据，如果字符串数据不符合JSON数据格式，则会产生错误，同时也减少安全隐患，但是执行效率方面eval()函数要快很多。
代码示范：
这里写图片描述

8. Storage API的事件

有时候，会存在多个网页或标签页同时访问存储数据的情况。为保证修改的数据能够及时反馈到另一个页面，HTML5的Web Storage内建立一套事件通知机制，会在数据更新时触发。无论监听的窗口是否存储过数据，只要与执行存储的窗口是同源的，都会触发Web Storage事件。
例如下面的代码，添加监听事件后，即可接收同源窗口的Storage事件。

window.addEventListener("storage",EventHandle,true);

Storage是添加的监听事件，只要是同源的Storage事件发生，都能够因数据更新而出发事件。
Storage事件的接口如下所示：

interface StorageEvent : Event {    
    readonly attribute DOMString key;    
    readonly attribute DOMString ? oldValue;    
    readonly attribute DOMString ? newValue;    
    readonly attribute DOMString url;    
    readonly attribute Storage ? storageArea;
};

StorageEvent对象在事件触发时，会传递给事件处理程序，它包含了存储变化有关的所有必要的信息。
Storage事件的相关属性：
这里写图片描述

9. 本地数据库Web SQL

为了进一步加强客户端的存储能力，HTML5引入了本地数据库的概念。 Web SQL Database的规范使用的是SQLite数据库，它允许应用程序通过一个异步的JavaScript接口访问数据库。
SQLite是一款轻型的数据库，遵循ACid的关系型数据库管理系统，它的优势是嵌入式，且占用资源非常低，只需要几百KB的内存就可以了。在跨平台方面，它能够支持Windows、Linux等主流操作系统，同时能够与很多程序语言如C#、PHP、Java、JavaScript等结合。它包含ODBC接口，在处理速度方面也非常可观。
Web SQL Database规范中定义了3个核心方法：
这里写图片描述

10. Web SQL数据库基本操作

1、打开数据库

var db=openDatabase("TestDB","1.0","测试数据库",2*1024*1024,creation Callback);

该方式有5个必需的参数，第1个参数表示数据库名，第2个参数表示版本号，第3个参数表示数据库的描述，第4个参数表示数据库大小，第5个参数表示创建回调函数，其中第5个参数是可选的。
2、创建数据库

db.transaction(function(tx){
   tx.executeSql('CREATE TABLE IF NOT EXISTS UserName(id unique,Name)');
});

使用transaction()方法传递给回调函数的tx是一个transaction对象，然后使用transaction对象的executeSql()方法，可以执行SQL语句，这里的SQL语句就是创建数据表的命令。
3、添加数据至数据库表

db.transaction(function(tx){    
     tx.executeSql('INSERT INTO UserName(id,name) VALUES(1,"张三")');
     tx.executeSql('INSERT INTO UserName(id,name) VALUES(2,"李四")');
});

两个包含Insert INTO命令的SQL语句，表示插入数据，将会在本地数据库TestDB中的UserName表中添加两条数据。
4、读取数据库中的数据

db.transaction(function(tx){    
   tx.executeSql('SELECT * FROM UserName',[],function(tx,results){        
   var len = results.rows.length;        
   for(var i=0;i<len;i++){
       console.log(results.rows.item(i).Name);        
   },null);  
});

executeSql()方法中执行了包含select命令的SQL语句，表示查询，将从本地数据库TestDB中的UserName表中查询信息。查询出来的结果会传递给匿名的回调函数，可以在回调函数中处理查询的结果，如控制台输出结果。