前言随着Web应用的发展，越来越多的应用数据需要存储在用户的本地浏览器上。传统的cookie存储方案已经不能满足开发需求，采用服务端存储方案。这是一个无奈的选择。HTML的WebStorageAPI是一个理想的解决方案。如果是存储复杂数据，可以借助WebSQLDatabaseAPI实现，使用SQL语句完成复杂数据的存储和查询。本文介绍HTML5中的本地存储功能。本章知识点了解WebStorage的优势了解localStorage和sessionStorage的区别掌握Storage数据的设置和获取方法掌握StorageAPI的属性和方法了解本地数据库WebSQL使用HTML5的WebStorage功能存储客户端数据更多，数据可以在多个页面之间共享甚至同步。1、cookie存储数据不足cookie可以用来在程序员之间传递少量数据。对于Web应用程序，它是一种在服务器和客户端之间来回传输文本值的内置机制。服务器可以根据cookie跟踪用户访问各种页面的信息。由于其卓越的性能，cookies在当前的网络应用中使用最为广泛。尽管如此，cookies还是有很多不尽如人意的地方，主要表现在以下几个方面。1.大小限制cookie的大小限制为4KB。在Web的富应用环境中，无法接受文件或电子邮件等大数据。2.带宽限制只要有涉及cookies的请求，cookies数据就会在服务器和浏览器之间来回传送。这样无论访问哪个页面，cookie数据都会消耗网络带宽。3、安全风险由于cookies在网络上频繁传输，数据在网络上可见，不加密存在安全风险。4、操作复杂在客户端的浏览器中，使用JavaScript来操作cookie数据是比较复杂的。但是服务器端可以很容易地操作cookie数据2.使用WebStorageStorage的优势WebStorage可以在客户端保存大量数据，通过它提供的接口访问数据非常方便。不过WebStorage的诞生并不是为了取代cookies，相反，它是为了弥补cookies在本地存储方面性能上的不足。WebStorage本地存储的优势主要体现在以下几个方面。1.存储容量提供更大的存储容量。在Firefox、Chrome、Safari和Opera中每个域5MB；IE8及以上版本为10MB。2、零带宽WebStorage是本地存储，不与服务器交互，不存在带宽占用。3.编程接口WebStorage提供了一套丰富的编程接口，使得数据操作更加方便。4.独立储物空间。每个域都有独立的存储空间。每个存储空间完全独立，不会造成数据损坏。困惑。可见WebStorage并不能完全替代cookies。Cookie能做到的，WebStorage未必能做到。例如，服务器可以访问cookie数据，但不能访问WebStorage数据。因此，WebStorage和cookies是相辅相成的，将在不同的领域发挥作用。随着移动互联网的发展，浏览器端的丰富应用必然是一种趋势。3、会话存储（sessionStorage）和本地存储（localStorage）的区别WebStorage包括会话存储（sessionStorage）和本地存储（localStorage）。熟悉Web开发的人在第一次接触WebStorage的时候，自然会对应到session和cookies。不同的是cookie和session完全是服务端可以操作的数据，而sessionStorage和localStorage完全是浏览器客户端可以操作的数据。sessionStorage和localStorage完全继承了同一个StorageAPI，所以sessionStorage和localStorage的编程接口是一样的。sessionStorage和localStorage的主要区别在于数据存在的时间范围和页范围。我画了一个sessionStorage和localStorage的区别表，大家看看：4.查看浏览器是否支持WebStorage，放到页面上：functionCheckStorageSupport(){if(window.sessionStorage){console.log("Browsersupports会话存储功能！”）；}else{console.log("浏览器不支持sessionStorage功能！");}if(window.localStorage){console.log("浏览器支持localStorage功能！");}else{console.log("浏览器不支持localStorage功能！");}}window.addEventListener("load",CheckStorageSupport,false);控制台预览结果：我会直接在控制台中输入结果，读者可以将上面的代码放到页面中运行看看结果：5.设置和获取Storage数据sessionStorage和localStorage作为窗口属性，完全继承了StorageAPI，它们提供了完全相同的操作数据的方法。下面以sessionStorage属性为例进行说明。1.保存数据到sessionStoragewindow.sessionStorage.setItem("key","value");key是键，value是值，setItem()表示保存数据的方法。2、从sessionStorage中获取数据如果知道sessionStorage中保存的key，就可以获取到对应的value。从sessionStorage获取数据的基本语法如下：value=window.sessionStorage.getItem("key");3.其他设置和获取数据的写法访问Storage对象还有更简单的方法，基于“key”和“value”的配对关系，直接在sessionStorage对象上设置和获取数据，可以完全避免调用setItem()和getItem()方法。保存数据的方法也可以写成下面的形式。window.sessionStorage.key="值";或者window.sessionStorage["key"]="value";获取数据的方法比较直接，可以这样写：value=window.sessionStorage.key;或值=窗口。sessionStorage["密钥"];对于localStorage，它也有上面设置数据和获取数据的方法。代码演示：6.StorageAPI的属性和方法在使用sessionStorage和localStorage时，可以使用上面的属性和方法，但是需要注意它们的影响范围。七、存储JSON对象数据1.将数据序列化为JSON格式由于Storage是以字符串的形式存储数据，所以在将数据保存为JSON格式之前，需要先将JSON格式的数据转换为字符串，即序列化。JSON.stringify()可用于将JSON格式的数据序列化为字符串数据。使用方法如下：varstringData=JSON.stringify(jsonObject);上述代码将JSON格式的数据对象jsonObject序列化为字符串数据stringData。2.将数据序列化为JSON格式。如果要访问Storage中存储的数据为JSON格式的对象，需要将字符串数据转成JSON格式的数据，这就变成了反序列化。您可以使用JSON.parse()将字符串数据反序列化为JSON格式的数据。使用方法如下：varjsonObject=JSON.parse(stringData);上述代码将字符串数据stringData反序列化为JSON格式的数据对象jsonObject。将字符串反序列化成JSON格式的数据，也可以使用eval()函数，但是eval()函数会将任意字符串转换成脚本，存在很大的安全隐患，而JSON.parse()只是反序列化字符串数据在JSON格式中，如果字符串数据不符合JSON数据格式，会产生错误，降低安全风险，但eval()函数在执行效率上要快很多。代码演示：8.StorageAPI的事件有时，可能会出现多个网页或标签页同时访问存储数据的情况。为了保证修改后的数据能及时反馈到另一个页面，HTML5WebStorage中建立了一套事件通知机制，当数据更新时触发。不管被监控的窗口是否有存储数据，只要与执行存储的窗口同源，就会触发WebStorage事件。例如下面的代码，添加监听事件后，可以接收同源窗口的Storage事件。window.addEventListener("storage",EventHandle,true);Storage是添加的监听事件，只要发生同源Storage事件，数据更新就可以触发该事件。Storage事件的接口如下：interfaceStorageEvent:Event{readonlyattributeDOMStringkey;只读属性DOMString？旧值；只读属性DOMString？新价值；只读属性DOMStringurl；只读属性存储？储藏区域;};传递给事件处理程序，其中包含有关存储更改的所有必要信息。Storage事件的相关属性：9.本地数据库WebSQL为了进一步增强客户端的存储能力，HTML5引入了本地数据库的概念。WebSQL数据库规范使用SQLite数据库，它允许应用程序通过异步JavaScript接口访问数据库。SQLite是遵循ACid的关系数据库管理系统的轻量级数据库。它的优点是嵌入式，占用资源极少。它只需要几百KB的内存。在跨平台方面，可支持Windows、Linux等主流操作系统，可与C#、PHP、Java、JavaScript等多种编程语言结合。包含ODBC接口，是在处理速度方面也非常令人印象深刻。WebSQL数据库规范中定义了三个核心方法：十、WebSQL数据库的基本操作1、打开数据库vardb=openDatabase("TestDB","1.0","TestDatabase",2*1024*1024,creationCallback);该方法有5个必填参数，第一个参数表示数据库名称，第二个参数表示版本号，第三个参数表示数据库的描述信息，第四个参数表示数据库大小，第五个参数表示创建回调函数，其中第五个参数是可选的。2.创建数据库db.transaction(function(tx){tx.executeSql('CREATETABLEIFNOTEXISTSUserName(idunique,Name)');});使用transaction()方法传递给回调函数的tx是一个交易对象，然后使用交易对象的executeSql()方法执行SQL语句，其中SQL语句就是创建数据表的命令。3.向数据库表添加数据db.transaction(function(tx){tx.executeSql('INSERTINTOUserName(id,name)VALUES(1,"张三")');tx.executeSql('INSERTINTOUserName(id,name)VALUES(2,"丽丝")');});两条包含InsertINTO命令的SQL语句，意思是插入数据，将两条数据添加到本地数据库TestDB中的UserName表中。4.读取数据库中的数据db.transaction(function(tx){tx.executeSql('SELECT*FROMUserName',[],function(tx,results){varlen=results.rows.length;for(vari=0;i
