& HTML5 Web 客户端五种离线存储方式汇总
最近折腾HTML5游戏需要离线存储功能，便把目前可用的几种HTML5存储方式研究了下，基于写了个综合的实例，分别利用了Cookie、WebStorage、IndexedDB以及FileSystem四种本地离线存储方式，对燃气监控系统的表计位置、朝向、开关以及表值等信息做了CURD的存取操作。
HTML5的存储还有一种方式，虽然还有浏览器支持，是唯一的关系数据库结构的存储，但W3C以及停止对其的维护和发展，所以这里我们也不再对其进行介绍：
整个示例主要就是将的数据模型信息进行序列化和反序列化，这个过程很简单通过dataModel.serialize()将模型序列化成JSON字符串，通过dataModel.deserialize(jsonString)将JSON字符串内存反序列化出模型信息，而存储主要就是主要就是针对JSON字符串进行操作。
先介绍最简单的存储方式，代码如下，几乎不用介绍就是Key-Value的简单键值对存储结构，Web Storage除了localStorage的持久性存储外，还有针对本次回话的sessionStorage方式，一般情况下localStorage较为常用，更多可参考
function save(dataModel){
var value = dataModel.serialize();
window.localStorage['DataModel'] =
window.localStorage['DataCount'] = dataModel.size();
console.log(dataModel.size() + ' datas are saved');
function restore(dataModel){
var value = window.localStorage['DataModel'];
if(value){
dataModel.deserialize(value);
console.log(window.localStorage['DataCount'] + ' datas are restored');
return '';
function clear(){
if(window.localStorage['DataModel']){
console.log(window.localStorage['DataCount'] + ' datas are cleared');
delete window.localStorage['DataModel'];
delete window.localStorage['DataCount'];
最古老的存储方式为Cookie，本例中我只能保存一个图元的信息，这种存储方式存储内容很有限，只适合做简单信息存储，存取接口设计得极其反人类，为了介绍HTML5存储方案的完整性我顺便把他给列上：
function getCookieValue(name) {
if (document.cookie.length & 0) {
var start = document.cookie.indexOf(name + "=");
if (start !== -1) {
start = start + name.length + 1;
var end = document.cookie.indexOf(";", start);
if (end === -1){
end = document.cookie.
return unescape(document.cookie.substring(start, end));
return '';
function save(dataModel) {
var value = dataModel.serialize();
document.cookie = 'DataModel=' + escape(value);
document.cookie = 'DataCount=' + dataModel.size();
console.log(dataModel.size() + ' datas are saved');
function restore(dataModel){
var value = getCookieValue('DataModel');
if(value){
dataModel.deserialize(value);
console.log(getCookieValue('DataCount') + ' datas are restored');
return '';
function clear() {
if(getCookieValue('DataModel')){
console.log(getCookieValue('DataCount') + ' datas are cleared');
document.cookie = "DataModel=; expires=Thu, 01 Jan :00 UTC";
document.cookie = "DataCount=; expires=Thu, 01 Jan :00 UTC";
如今比较实用强大的存储方式为，IndexedDB可以存储结构对象，可构建key和index的索引方式查找，目前各浏览器的已经逐渐支持IndexedDB的存储方式，其使用代码如下，需注意IndexedDB的很多操作接口类似NodeJS的异步回调方式，特别是查询时连cursor的continue都是异步再次回调onsuccess函数的操作方式，因此和NodeJS一样使用上不如同步的代码容易。
request = indexedDB.open("DataModel");
request.onupgradeneeded = function() {
db = request.
var store = db.createObjectStore("meters", {keyPath: "id"});
store.createIndex("by_tag", "tag", {unique: true});
store.createIndex("by_name", "name");
request.onsuccess = function() {
db = request.
function save(dataModel){
var tx = db.transaction("meters", "readwrite");
var store = tx.objectStore("meters");
dataModel.each(function(data){
store.put({
id: data.getId(),
tag: data.getTag(),
name: data.getName(),
meterValue: data.a('meter.value'),
meterAngle: data.a('meter.angle'),
p3: data.p3(),
r3: data.r3(),
s3: data.s3()
tx.oncomplete = function() {
console.log(dataModel.size() + ' datas are saved');
return dataModel.serialize();
function restore(dataModel){
var tx = db.transaction("meters", "readonly");
var store = tx.objectStore("meters");
var req = store.openCursor();
var nodes = [];
req.onsuccess = function() {
var res = req.
var value = res.
var node = createNode();
node.setId(value.id);
node.setTag(value.tag);
node.setName(value.name);
'meter.value': value.meterValue,
'meter.angle': value.meterAngle
node.p3(value.p3);
node.r3(value.r3);
node.s3(value.s3);
nodes.push(node);
res.continue();
if(nodes.length){
dataModel.clear();
nodes.forEach(function(node){
dataModel.add(node);
console.log(dataModel.size() + ' datas are restored');
return '';
function clear(){
var tx = db.transaction("meters", "readwrite");
var store = tx.objectStore("meters");
var req = store.openCursor();
var count = 0;
req.onsuccess = function(event) {
var res = event.target.
store.delete(res.value.id);
res.continue();
console.log(count + ' datas are cleared');
最后是相当于操作本地文件的存储方式，目前支持浏览器不多，其接口标准也在发展制定变化中，例如在我写这个代码时大部分文献使用的webkitStorageInfo已被navigator.webkitPersistentStorage和navigator.webkitTemporaryStorage替代，存储的文件可通过filesystem:/persistent/meters.txt’的URL方式在chrome浏览器中查找到，甚至可通过filesystem:/persistent/类似目录的访问，因此也可以动态生成图片到本地文件，然后通过filesystem:http:***的URL方式直接赋值给img的html元素的src访问，因此本地存储打开了一扇新的门，相信以后会冒出更多稀奇古怪的奇葩应用。
navigator.webkitPersistentStorage.queryUsageAndQuota(function (usage, quota) {
console.log('PERSISTENT: ' + usage + '/' + quota + ' - ' + usage / quota + '%');
navigator.webkitPersistentStorage.requestQuota(2 * 1024 * 1024,
function (grantedBytes) {
window.webkitRequestFileSystem(window.PERSISTENT, grantedBytes,
function (fs) {
window.fs =
function save(dataModel) {
var value = dataModel.serialize();
fs.root.getFile('meters.txt', {create: true}, function (fileEntry) {
console.log(fileEntry.toURL());
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function () {
console.log(dataModel.size() + ' datas are saved');
var blob = new Blob([value], {type: 'text/plain'});
fileWriter.write(blob);
function restore(dataModel) {
fs.root.getFile('meters.txt', {}, function (fileEntry) {
fileEntry.file(function (file) {
var reader = new FileReader();
reader.onloadend = function (e) {
dataModel.clear();
dataModel.deserialize(reader.result);
console.log(dataModel.size() + ' datas are restored');
reader.readAsText(file);
return '';
function clear() {
fs.root.getFile('meters.txt', {create: false}, function(fileEntry) {
fileEntry.remove(function() {
console.log(fileEntry.toURL() + ' is removed');
Browser-Side的存储方式还在快速的发展中，其实除了以上几种外还有Application Cache，相信将来还会有新秀出现，虽然“云”是大趋势，但客户端并非要走极端的“瘦”方案，这么多年冒出了这么多客户端存储方式，说明让客户端更强大的市场需求是强烈的，当然目前动荡阶段苦逼的是客户端程序员，除了要适配Mouse和Touch，还要适配各种屏，如今还得考虑适配各种存储，希望本文能在大家选型客户端存储方案时有点帮助，最后上段基于操作HTML5存储示例的视频效果：建网站选织梦模板，首选跟版网(最大的织梦模板商城)，您可以把织梦模板网：
亲，跟版网是中国最具专业的DEDECMS模板资源提供商！您可以选择或者
让 JavaScript 拯救 HTML5 的离线存储
在 Internet 连接无处不在的今天，我们忽然有了另外一个需求，离线 Web。Gmail, Google Reader, Zoho
这些优秀的 Web 应用都支持离线使用，这归功于 Google Gears。然而真正的离线 Web 要靠 HTML 5，这个未来的 Web
语言明星将为& Web 的离线存储制定一套标准，W3C已经发布 。
有人可能会说，，你得到的只是一个蹩脚的桌面程序，在 wi-fi, 3G 无处不在的今天，我们大部分时间都是在线的，这虽然没错，但我们当中那些已经对各种 Web 应用，如 email, 在线新闻以及 Twitter 一刻不可或缺的人来说，离线 Web 是非常重要的。
不过问题总是有的，HTML5 Web 存储细则中牵扯到很复杂的问题，。 那些需要编写离线 Web 程序的人需要编写 SQL 代码，SQLite没有错，但它是 SQL 的一个变种，和标准 SQL
有些差别，另外，SQLite 并不属于 W3C，它的所有者很有可能某一天改变它的接口，这会导致那些已经写就的 Web 程序必须重新编写。
是否有更好的方法？Mozilla 实验室的 。Varma 正在研究 CouchDB 的一个实验版本，在浏览器中，将该数据库的语义用 JavaScript 实现。最终，我们或许可以直接使用 JavaScript 实现数据库查询，消除 HTML5 在这方面的问题。
针对这篇文章，Mozilla Fennec 移动浏览器团队的 Mark Finkle 在评论中表示，这个方案回避了标准数据库后台中更主要的问题，最好让 localStorage/globalStorage 成为标准，让标准保留在底层，他在自己的一篇中指出，应当建立一个 JavaScript 库，就像现有的很多 JavaScript 库可以操作网页元素一样，也应当有个 JavaScript 库用来操作离线 Web 存储数据。
这种方法表面上看很复杂，但会为开发者带来灵活，当 Web 无所不能的时候，我们的机会会更多。
跟版网-专业织梦模板下载平台，转载请注明出处：
& &邀您关注： &
扫描左侧二维码即可在手机端访问此页面
扫描左侧二维码即可关注跟版网官方微信公众号，获取金币模板，还可以免费仿站哦！
扫描左侧二维码即可加入跟版网官方群，免费获取金币资源并可以与其他织梦高手共同交流学习
跟版网率先实现织梦的三网合一网站，从即日起（）日，跟版网会陆续免费分享一批金币资源给需要的朋友，关注本站认证官方微信公众账号并回复相应的提取码，系统会自动将下载地址发送给您，同时这些金币资源也会分享在官方的QQ群中，欢迎各位朋友踊跃加入。另外本站后期会每周选择大家比较喜欢的网站仿制，并免费分享给大家，还有免费送金币活动哦！
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
& & & 跟版网竭力打造中国最大的织梦源码和织梦模板商城，我们有一批经验丰富的设计师和程序员，发展五年，跟版网拥有丰富的织梦模板，欢迎您的咨询，我们将竭诚为您提供最优质的服务。
& & & 跟版网织梦源码商城坚持“创意+品质+服务”的高端理念，运用创意设计的理念为您塑造高品质的网络品牌形象。凭借五年的探索和实践，跟版网织梦源码商城拥有一支经验丰富、技术精湛、尽职尽责的网络服务团队。精品网站建设，从跟版网织梦源码商城建站开始。
& & & 跟版网织梦源码和模板可分为两种形式获得，一种是官方源码，另外一种是会员共享源码。两种源码都分为免费和收费两种形式。
& & & 跟版网官方收费源码可通过支付费用获得，具体操作流程可查看网址：。会员共享源码可通过共享模板获取金币下载。如觉得麻烦，可以联系客服QQ：进行金币充值，充值后可随意下载。　　Web 应用程序有离线功能，如保存大量数据集和二进制文件。你甚至可以做这样的事情。浏览器技术可以保存离线数据和大量的储存。但问题是，如何选择合适技术，如何方便灵活的实现。
　　如果你需要开发一个支持离线存储的
应用程序，不知道从哪里开始，那么这篇文章正是你需要的。
您可能感兴趣的相关文章
　　localStorage 能够让你实现基本的数据存储，但它的速度慢，而且不能处理二进制数据。IndexedDB 和 WebSQL 是异步的，速度快，支持大数据集，但他们的API 使用起来有点复杂。不仅如此，IndexedDB 和 WebSQL 没有被所有的主流的浏览器厂商支持，这种情况最近也不太可能改变。
　　Mozilla 开发了一个叫 localForage 的库 ，使得离线数据存储在任何浏览器都是一项容易的任务。
　　localForage 是一个使用非常简单的
库的，提供了 get，set，remove，clear 和 length 等等 API，还具有以下特点：
支持回调的异步 API；
支持 IndexedDB，WebSQL 和 localStorage 三种存储模式（自动为你加载最佳的驱动程序）；
支持 BLOB 和任意类型的数据，让您可以存储图片，文件等等。
支持 ES6 Promises；
　　对&IndexedDB 和 WebSQL 的支持使您可以为您的
应用程序存储更多的数据，要比 localStorage 允许存储的多很多。其 API 的无阻塞性质使得您的应用程序更快，不会因为 Get/Set 调用而挂起主线程。
localStorage
　　传统的 &API 在许多方面其实是很不错的，使用简单，没有复杂的数据结构。如果你在你的应用程序有一个配置信息需要保持，可以这样写：
// 需要离线保存的配置数据
var config = {
fullName: document.getElementById('name').getAttribute('value'),
userId: document.getElementById('id').getAttribute('value')
// 保存起来，供下次使用
localStorage.setItem('config', JSON.stringify(config));
// 从离线存储中读取出来
var config = JSON.parse(localStorage.getItem('config'));
　　请注意，使用 localStorage 存储的数据需要保存为字符串，所以我们在保存和读取时需要进行 JSON 序列化和反序列化。
　　看起来好像使用很简单，但你很快会发现 localStorage 的几个问题：
它是同步的。不管数据多大，我们需要等待数据从磁盘读取和解析，这会减慢我们的应用程序的响应速度。这在移动设备上是特别糟糕的，主线程被挂起，直到数据被取出，会使你的应用程序看起来慢，甚至没有反应。
它仅支持字符串。需要使用 JSON.parse 与 JSON.stringify 进行序列号和反序列化。这是因为 localStorage 中仅支持 JavaScript 字符串值。不支持数值，布尔值，Blob 类型的数据。
localForage
　　localForage 可以解决上面的问题，下面我们对比一下 IndexedDB 和 localForage 存储相同数据的差异：
　　IndexedDB 代码：
// IndexedDB.
var dbName = "dataspace";
var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ];
var request = indexedDB.open(dbName, 2);
request.onerror = function(event) {
// 错误处理
request.onupgradeneeded = function(event) {
db = event.target.
var objectStore = db.createObjectStore("users", { keyPath: "id" });
objectStore.createIndex("fullName", "fullName", { unique: false });
objectStore.transaction.oncomplete = function(event) {
var userObjectStore = db.transaction("users", "readwrite").objectStore("users");
var transaction = db.transaction(["users"], "readwrite");
// 所有数据都添加到数据后调用
transaction.oncomplete = function(event) {
console.log("All done!");
transaction.onerror = function(event) {
// 错误处理
var objectStore = transaction.objectStore("users");
for (var i in users) {
var request = objectStore.add(users[i]);
request.onsuccess = function(event) {
// 里面包含我们需要的用户信息
console.log(event.target.result);
　　使用&WebSQL 实现可能不会那么太冗长，但也是有点复杂。使用 localForage，可以这样写：
　　localForage 代码：
// 保存用户信息
var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ];
localForage.setItem('users', users, function(result) {
console.log(result);
　　是不是简单了很多？
支持非字符串数据
　　比方说，你要下载一个用户的个人资料图片，并对其进行缓存以供离线使用。使用&localForage&很容易保存二进制数据：
// 使用 AJAX 下载图片
var request = new XMLHttpRequest();
// 以获取第一个用户的资料图片为例
request.open('GET', "/users/1/profile_picture.jpg", true);
request.responseType = 'arraybuffer';
// 当 AJAX 调用完成，把图片保存到本地
request.addEventListener('readystatechange', function() {
if (request.readyState === 4) { // readyState DONE
// 保存的是二进制数据，如果用 localStorage 就无法实现
localForage.setItem('user_1_photo', request.response, function() {
// 图片已保存，想怎么用都可以
request.send()
　　下次，只用三行代码就可以从缓存中把照片读取出来：
localForage.getItem('user_1_photo', function(photo) {
// 获取到图片数据后，可以通过创建 data URI 或者其它方法来显示
console.log(photo);
Callbacks & Promises
　　如果你不喜欢在你的代码中使用回调，你可以使用&，来替换 localForage 的回调参数。让我们使用上面的照片例子，看下使用 Promises 的代码：
localForage.getItem('user_1_photo').then(function(photo) {
// 获取到图片数据后，可以通过创建 data URI 或者其它方法来显示
console.log(photo);
跨浏览器支持
　　localForage 支持所有现代浏览器（包括 IE8 及更高版本）。支持的浏览器和平台如下：&
Android Browser 2.1
Blackberry 7
Chrome 23&(Chrome 4.0 with localStorage)
Chrome for Android 32
Firefox 10&(Firefox 3.5 with localStorage)
Firefox for Android 25
Firefox OS 1.0
IE 10&(IE 8 with localStorage)
IE Mobile 10
Opera 15&(Opera 10.5 with localStorage)
Opera Mobile 11
Phonegap/Apache Cordova 1.2.0
Safari 3.1&(includes Mobile Safari)
您可能感兴趣的相关文章
本文链接： via
编译来源：
本文来自【梦想天空（）】
阅读(...) 评论()使用HTML5 Web存储实现离线工作
发表于 08:46|
来源IBM developerWorks|
作者Kris Hadlock
摘要：HTML5是一个新的HTML标准，它拥有大量新的功能和布局技术。它完全支持多媒体、CSS3以及使用画布和可缩放矢量图形(Scalable Vector Graphics, SVG)的绘图功能。HTML5供了新的语义元素，还提供了恰当的使用应用程序缓存器、JavaScript worker、新版本的XMLHttpRequest 一种名为Web存储的工具创建HTML Web应用程序的方式。
本文将探讨Web存储的强大功能，以及它成为一种优于cookies的存储方法的原因。通过本文您将了解基本概念、浏览器支持和HTML5 Web存储对象。
Cookies从JavaScript出现之初就一直存在，所以在Web上存储数据并不是个新概念。不过Web存储是数据存储的一种更为强大的版本，可提供更多的安全性、速度和易用性。在Web存储中还可以存储数量巨大的数据。具体的数量则取决于Web浏览器，但通常都在5MB到10MB之间，这对于一个HTML应用程序而言已经足够大。另一个好处是此数据并不会在每次出现服务器请求时都被加载。惟一的限制是不能在浏览器之间分享Web存储, 如果您在Safari中存储了数据，那么该数据在Mozilla Firefox中是无法访问的。
内置到HTML5中的Web存储对象有两种类型：
sessionStorage 对象负责存储一个会话的数据。如果用户关闭了页面或浏览器，则会销毁数据。
The localStorage 对象负责存储没有到期的数据。当Web页面或浏览器关闭时，仍会保持数据的存储，当然这还取决于为此用户的浏览器设置的存储量。
常用的缩写语
API：应用程序编程接口 (Application Programming Interface)
CSS：级联样式表 (Cascading Style Sheet)
HTML：超文本标记语言 (HyperText Markup Language)
JSON：JavaScript Serialized Object Notation
这两种存储对象具有相同的方法和属性。为了获得一致性，本文在所有的示例中使用的都是localStorage对象。
在本文中，我们将了解Web存储的强大功能，以及它成为优于cookies的一种存储方式的原因。本文还将探索基本的Web存储概念、HTML5 Web存储方法和浏览器支持。
您可以本文示例中使用的源代码。
浏览器支持
所有最新的浏览器版本均支持Web存储特性，这些浏览器包括Firefox、Google Chrome、Safari、Opera和Microsoft& Windows& Internet Explorer& 8+。不幸地是，Internet Explorer 7和更早版本不支持Web存储。表 1显示了支持 HTML5 Web存储的每个桌面浏览器版本。
表 1. HTML5 Web存储的桌面浏览器支持
除了Opera Mini之外，其他移动浏览器也提供了对HTML5 Web存储的支持。表 2 显示了支持HTML5 Web存储的每个移动浏览器版本。
表 2. HTML5 Web存储的移动浏览器支持
HTML5 Web存储的浏览器支持十分令人瞩目。但是，较老的浏览器要求在使用之前检查Web存储支持的浏览器。为了了解Web存储支持而对浏览器进行检查非常简单。可以使用一个简单的条件语句来查看HTML5存储对象是否已经定义。如果已经定义，就可以放心进行Web存储脚本编写。如果未定义，而数据存储又是必需的，则需要采用一种备选方法，比如JavaScript cookie。清单 1的例子显示了一种简单的为Storage对象进行浏览器检查的方式。
清单 1.Web存储支持的浏览器检查
if(typeof(Storage)!==&&undefined&)&{ &&&//&Web&storage&is&supported &} &else&{ &&&//&Web&storage&is&NOT&supported &}&
如果浏览器不支持Web存储，那么您可以使用JavaScript cookie或一个现有的库（比如 AmplifyJS）来创建一个定制的Web存储对象。AmplifyJS是一组组件，旨在通过一个简单的API解决常见Web应用程序问题，包括某些浏览器中的Web存储支持。AmplifyJS用amplify.store包装程序来处理持久的客户端存储，它支持Internet Explorer 5+、Firefox 2+、Safari 4+、Chrome、Opera 10.5+、iOS 2+ 和 Android 2+。这个库还支持一个持久的API来处理跨浏览器存储；您无需基于具体的浏览器编写不同的代码。如果浏览器支持HTML5 Web存储，那么AmplifyJS就会使用最新的存储技术。如果浏览器不支持HTML5 Web存储，那么AmplifyJS就会降级，以支持没有该功能的存储。请参阅，更多地了解AmplifyJS以及用于其存储包装程序的API。
有几种简单易用的方法可提供HTML5 Web存储功能。这些方法支持设置一个键/值对，提供了两个基于键来检索某个值的选项，同时清除所有的键/值对，并删除了某个特定的键/值对。表3显示了可用的HTML5 Web存储方法。
表 3.HTML5 Web存储方法
在创建并将键/值对添加到此Web存储对象时，可以使用任何类型作为键/值对中的值（字符串、数值、数组、对象等）。要存储一个数组或对象，则必须使用JSON对象通过JSON.stringify 方法将数据转换为一个字符串。在检索此数据时，可以使用JSON.parse 进行检索，它会返回原始状态的对象或数据。还有两种向Web存储对象添加键/值对的不同方式。第一种方式是使用setItem方法，如清单 2所示。
清单 2.使用setItem方法向Web存储对象添加键/值对
localStorage.setItem('myKey',&'myValue');&
向Web存储对象添加键/值对的第二种方法是使用带dot参数的Web存储对象来直接设置此键的值，如清单 3所示。
清单 3.直接向Web存储对象添加键/值对
localStorage.myKey&=&'myValue';&
检索所存储的值同样十分简单，也有两种方式。第一种方式是使用getItem方法，它接受键作为参数并返回相应的值（如果存在）。清单 4显示了一个示例。
清单 4.使用getItem从Web存储对象中检索键/值对
localStorage.getItem('myKey');&
从Web存储对象中检索键/值对的第二个方法是使用dot参数直接访问它，如清单5所示。该示例返回了在之前的例子中设置的 'myValue'字符串值。
清单 5.直接从Web存储对象中检索键/值对
localStorage.myK&
有两种方法可以删除所存储的数据。可以同时删除所有项，也可以一次删除个别项。要同时从Web存储对象中删除所有项，可以使用clear方法，如清单6所示。
清单 6.从Web存储对象中删除所有键/值对
localStorage.clear();&
要从Web存储对象中删除单个键/值对，需要使用removeItem方法。清单7显示了removeItem方法的一个示例，它接受一个键作为参数，并确定哪个键/值对要从此存储对象删除。
清单 7.从Web存储对象中删除单个键/值对
localStorage.removeItem('myKey');&
清单 8显示了一个如何使用JSON对象通过JSON.stringify方法将一个数组存储为字符串的示例。可以采用相同的方法处理对象。
清单 8.在HTML5 Web存储中将一个数组存储为字符串
var&myArray&=&new&Array('First&Name',&'Last&Name',&'Email&Address'); &localStorage.formData&=&JSON.stringify(myArray);&
要从Web存储检索数组的字符串版本，并将它转换回一个可用的JavaScript数组，只需使用JSON.parse方法，如清单9所示。
清单 9.从HTML5 Web存储中检索数组的字符串版本并将它转换成一个可用的JavaScript数组
var&myArray&=&JSON.parse(localStorage.formData);&
Internet Explorer 8+、Opera 10.5+、Firefox 3.5+、Safari 4+ 和 Chrome 均包括了一个本地的JSON对象，可以使用该对象来支持之前例子中的那些代码。如果您使用的是版本较早的浏览器，那么可以下载json2.js 文件（请参阅 参考资料）。
到目前为止，Web存储看起来很容易使用。但是，在开始使用之前，您应该意识到在共享的机器上会存在安全性问题。Web存储并不比cookies安全。所以不要在客户端存储敏感信息，比如密码或信用卡信息。
工作中的Web存储
介绍完基础知识后，现在是时候将HTML5 Web存储付诸于使用了。假设在您的网站上，您想要为一个Web表单提供离线支持。如果用户提交了表单，并且在网站恢复在线时让此表单与服务器同步，那岂不是很不错。HTML5可以实现此目标。
创建一个简单的Web表单，其中包含姓名、电子邮件地址和提交按钮，如清单10所示。
清单 10.使用HTML5 Web存储来存储数据的一个简单Web表单
&&&http-equiv=&Content-Type&&content=&text/&charset=UTF-8&&HTML5&Web&Storage&&type=&text/css&&label,& &input&{ &&&display:& &} &input&{ &&&margin-bottom:&10 &} &&&&&&&action=&post.php&&method=&post&&id=&web-storage-form&&&&&for=&first-name&First&name:&&&&type=&text&&name=&first-name&&id=&first-name&&&&&&for=&last-name&Last&name:&&&&type=&text&&name=&last-name&&id=&last-name&&&&&&for=&email-address&Email&Address:&&&&type=&text&&name=&email-address&&id=&email-address&&&&&&type=&submit&&value=&Submit&&&&&&
此表单包含了一个ID，可使用JavaScript检索表单post和值。此外，它还提供了CSS，以创建具有表单元素的基本布局。标签和输入上的display:block 将每个元素置于一个新行。margin-bottom属性在条目之间创建空间，让页面看起来不会太乱。
当用户提交表单时，代码首先会检索web-storage-form ID并使用jQuery捕获默认张贴，以阻止此张贴操作的发生。当张贴表单时，就可以收集表单值以及此表单动作的URL，以便将它们存储在变量中。在作为Asynchronous JavaScript + XML (Ajax) post发送表单值，或将它们存储于Web存储中时，您还需要序列化这些Web表单值。在提交表单之前，应该使用navigator.onLine属性查看用户当前是否在线。
如果用户在线，则使用jQuery.post函数，这是一个简略的Ajax函数，用于发送数据并从服务器接收数据。这个函数接受四个参数：数据被发送到的url、正在发送的data（序列化后的表单值）、请求成功便会触发的callback函数以及dataType。在本例中，并未包括dataType，所以会使用默认参数。
如果用户不在线，那么就可以让Web存储一展身手了。首先也是很重要的一点是，使用 清单1中创建的条件语句来查看浏览器是否支持Web存储。如果浏览器不支持 Web 存储，则使用一个定制键将表单值直接存储到localStorage 对象中。本例使用了formValues定制键。localStorage值的已经保存，现在可以检查当用户恢复在线时这些值是否存在，做法是通过添加一个if语句来检查localStorage.formValues是否有一个值。如果有一个值，则表明这个表单之前已经提交到 localStorage，并可以使用先前设置好的jQuery.post方法安全地向服务器发送数据。在提交值之后，应该从Web存储中将它们删除，以防止意外地重复提交它们。清单11显示了从使用Ajax的表单张贴到localStorage期间所需代码。
清单 11. 离线时将表单数据存储于localStorage，在线时将其提交到服务器
&type=&text/javascript&& &src=&/ajax/libs/jquery/1.7.2/jquery.min.js&&&&type=&text/javascript&&$(document).ready(function()&{ &&&//&Check&for&web&storage&values&from&a&previous&offline&session &&&if(localStorage.formValues)&{ &&&&&console.log(&localStorage.formValues:&&+&localStorage.formValues); &&&&&postForm($(&#web-storage-form&).attr('action'),&localStorage.formValues); &&&&&localStorage.removeItem(&formValues&); &&&} &&&&$(&#web-storage-form&).submit(function(event)&{ &&&&&//&Prevent&the&form&from&posting &&&&&event.preventDefault();& &&&&&&//&Gather&values &&&&&var&formValues&=&$(this).serialize(); &&&&&var&url&=&$(this).attr('action'); &&&&&postForm(url,&formValues); &&&}); &&}); &&function&postForm(url,&formValues)&{ &&&//&Post&to&server&or&post&to&web&storage &&&if(navigator.onLine)&{ &&&&&console.log(&Online&); &&&&&$.post(url,&formValues,&function(data)&{ &&&&&&&console.log(&Success:&&+&data); &&&&&}); &&&} &&&else&{ &&&&&console.log(&Offline&); &&&&&if(typeof(Storage)&!==&&undefined&)&{ &&&&&&&console.log(&Storage&supported&); &&&&&&&localStorage.formValues&=&formV &&&&&} &&&} &} &&
为了创建一个完整的例子，使用post.php 文件充当表单张贴的结尾，用以接收和响应表单请求。这个文件只简单接收表单张贴并通过打印键/值对进行响应，如清单12所示。当jQuery.post收到响应后，就可以将来自响应的数据写入控制台了。
清单 12.可响应表单请求的PHP文件
&print_r($_POST);&&
当然，您还可以让这个例子更为健壮。比如，您可以在服务器端上提供数据库存储，并使用一个间隔来检查localStorage，以便随时监视用户的计算机是否恢复在线，从而提交表单数据。
HTML5提供了一组强大的新功能，并迅速获得了主要Web浏览器的最新版本的支持。Web存储是HTML5众多引人注目的特性中的一个。但是，务必巧妙使用它。对于cookie，用户可以关闭Web存储。始终都要有一个备案，以便支持那些不想使用此新功能的用户。
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章