`
jiangzhenghua
  • 浏览: 602730 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML5本地存储不完全指南

 
阅读更多

历史

在HTML5本地存储之前，如果我们想在客户端保存持久化数据，有这么几个选择：

  1. HTTP cookie。HTTP cookie的缺点很明显，最多只能存储4KB的数据，每个HTTP请求都会被传送回服务器，明文传输（除非你使用SSL）。
  2. IE userData。userData是微软在上世纪90年代的浏览器大战时推出的本地存储方案，借助DHTML的behaviour属性来存储本地数据， 允许每个页面最多存储64K数据，每个站点最多640K数据，userData的缺点显而易见，它不是Web标准的一部分，除非你的程序只需要支持IE， 否则它基本没什么用处。
  3. Flash cookie。Flash cookie的名字有些误导，它实际上和HTTP cookie并不是一回事，或许它的名字应该叫做"Flash本地存储”，Flash cookie默认允许每个站点存储不超过100K的数据，如果超出了，Flash会自动向用户请求更大的存储空间，借助Flash的 ExternalInterface接口，你可以很轻松地通过Javascript操作Flash的本地存储。Flash的问题很简单，就是因为它是 Flash。
  4. Google Gears。Gears是Google在07年发布的一个开源浏览器插件，旨在改进各大浏览器的兼容性，Gears内置了一个基于SQLite的嵌入式 SQL数据库，并提供了统一API对数据库进行访问，在取得用户授权之后，每个站点可以在SQL数据库中存储不限大小的数据，Gears的问题就是 Google自己都已经不用它了。

现状

我们现在通常所说的HTML5本地存储，一般指的是Web Storage规范，这个标准曾经是HTML5规范的一部分，但后来因为种种原因从HTML5规范中分离了出来。但是除了Web Storage，HTML5的本地存储标准还有另外2个竞争者：Web SQL Database和IndexedDB。下面就让我们依次来看看这3个规范吧。

Web Storage

Web Storage是目前得到支持最广泛的HTML5本地存储规范：IE 8+、FF 3.5+、Safari 4+、Chrome 4+、Opera 10.5+，以及iPhone 2+和Android 2+都已经支持Web Storage，要判断你的浏览器是否支持Web Storage，可以使用下面这个函数：

代码 复制代码
  1. function supports_html5_storage() {   
  2.     try {   
  3.         return 'localStorage' in window && window['localStorage'] !== null;   
  4.     } catch (e) {   
  5.         return false;   
  6.     }   
  7. }  
function supports_html5_storage() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
        return false;
    }
}


HTML5 Storage的使用非常简单：

代码 复制代码
  1. var foo = localStorage.getItem("bar");   
  2. // ...   
  3. localStorage.setItem("bar", foo);  
var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);


你也可以写成下面这样：

代码 复制代码
  1. var foo = localStorage["bar"];   
  2. // ...   
  3. localStorage["bar"] = foo;  
var foo = localStorage["bar"];
// ...
localStorage["bar"] = foo;


如果要将某个key从存储空间删除，可以调用removeItem：

代码 复制代码
  1. localStorage.removeItem('foo');  
localStorage.removeItem('foo');



你也可以像遍历数组那样遍历存储的所有键值对象：

代码 复制代码
  1. for(var i=0; ivar key = localStorage.key(i);   
  2.     console.log(key + ":" + localStorage[key]);   
  3. }  
for(var i=0; ivar key = localStorage.key(i);
    console.log(key + ":" + localStorage[key]);
}


如果你的程序需要在不同页面访问同一个值，你可能需要了解这个值是否已经被其他页面改变了，这可以通过向浏览器注册storage事件来实现：

代码 复制代码
  1. window.addEventListener('storage', function(e) {   
  2.     console.log(e.key + "'s value is changed from '" +   
  3.         e.oldValue + "' to '" + e.newValue + "' by " + e.url);   
  4. }, false);   
  5.   
  6. //A页面   
  7. localStorage['foo'] = 'bar';   
  8.   
  9. //B页面   
  10. localStorage['foo'] = 'newBar';  
window.addEventListener('storage', function(e) {
    console.log(e.key + "'s value is changed from '" +
        e.oldValue + "' to '" + e.newValue + "' by " + e.url);
}, false);

//A页面
localStorage['foo'] = 'bar';

//B页面
localStorage['foo'] = 'newBar';


这时你应该会在A页面的Console中看到：

foo’s value is changed from ‘bar’ to ‘newbar’ by http://localhost/test.html

要注意的是，storage事件仅仅只是通知你某个键对应的值已经发生了改变，你没有办法在回调中阻止这个改变发生。

HTML5 Storage看起来不错，那它有没什么缺点呢？好问题。要说HTML5 Storage的缺点，唯一的问题就是它默认的QUOTA只有5MB，并且你没办法通过程序自行或是提示用户来增加存储空间。唯一的办法就是用户自己打开 浏览器的设置，并手动修改QUOTA的大小，如果超出了5MB的限制，你将会遇到一个“QUOTA_EXCEEDED_ERR”的错误。

Web SQL Database

Web SQL Database是一个已经废弃的规范，但是鉴于除了IE和Firefox，其他浏览器都已经实现了Web SQL Database，并且它还具有一些HTML5 Storage所不具有的特性，所以还是值得了解一下的。

Web SQL Database就像它的名字那样，就是一个让你可以在Web上直接使用的SQL数据库，你要做的就是打开数据库，然后执行SQL，和你对Mysql做的事情没什么两样：

代码 复制代码
  1. openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024,   
  2. function (db) {   
  3.     db.changeVersion('', '1.0', function (t) {   
  4.         t.executeSql('CREATE TABLE docids (id, name)');   
  5.     }, error);   
  6. });  
openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024,
function (db) {
    db.changeVersion('', '1.0', function (t) {
        t.executeSql('CREATE TABLE docids (id, name)');
    }, error);
});


关于Web SQL Database的更多介绍，可以参看这篇指南。

但是它的缺点也同样明显。最大的问题就出在SQL上，实际上并不存在一种叫做SQL的标准结构化查询语言，我们平常使用的实际上是MS SQL、Oracle SQL、MySQL SQL、postgre SQL或者SQLite SQL（尽管有一个叫做SQL-92的规范，但它基本形同虚设），更进一步，甚至都不存在SQLite SQL，我们使用的实际上是SQLite x.y.z SQL，而这也就是Web SQL Database最大的问题，它无法统一各个浏览器厂商实现的SQL语言，如果你的某条Web SQL查询只能在Chrome上运行，这还能叫做标准吗？

所以，如果你现在访问Web SQL Database的规范页面，你会在顶部看到这样一则声明：
这个规范已经陷入了一个僵局：目前的所有实现都是基于同一个SQL后端（SQLite），但是我们需要更多的独立实现来完成标准化，所以除非有厂商愿意独立实现这个规范，否则当前的SQL规范只能采用SQLite的SQL方言，而作为一个标准，这是不可接受的。

IndexedDB

最后我们要介绍的就是IndexedDB了，相比其他两个规范，目前只有Firefox实现了IndexedDB（顺便提一下，Mozilla表示它们永远不会去实现Web SQL Database），不过Google已经表示正在考虑在Chrome中加入IndexDB支持。

IndexedDB引入了一个object store的概念，这有点像是一个SQL Database，你可以在“数据库”中存储“记录”，并且每条“记录”可以拥有很多“字段"，每个字段都有一个特定的数据类型，你可以选择记录的子集， 并使用“光标”进行遍历，同时object store中的所有变更都是基于“事务”的。

下面让我们来看一个小例子：

代码 复制代码
  1. var request = window.indexedDB.open("CandyDB",   
  2.                                     "My candy store database");   
  3. request.onsuccess = function(event) {   
  4.   var db = event.result;   
  5.   if (db.version != "1") {   
  6.     // User's first visit, initialize database.   
  7.     var createdObjectStoreCount = 0;   
  8.     var objectStores = [   
  9.       { name: "kids", keyPath: "id", autoIncrement: true },   
  10.       { name: "candy", keyPath: "id", autoIncrement: true },   
  11.       { name: "candySales", keyPath: "", autoIncrement: true }   
  12.     ];   
  13.   
  14.     function objectStoreCreated(event) {   
  15.       if (++createdObjectStoreCount == objectStores.length) {   
  16.         db.setVersion("1").onsuccess = function(event) {   
  17.           loadData(db);   
  18.         };   
  19.       }   
  20.     }   
  21.   
  22.     for (var index = 0; index < objectStores.length; index++) {   
  23.       var params = objectStores[index];   
  24.       request = db.createObjectStore(params.name, params.keyPath,   
  25.                                      params.autoIncrement);   
  26.       request.onsuccess = objectStoreCreated;   
  27.     }   
  28.   }   
  29.   else {   
  30.     // User has been here before, no initialization required.   
  31.     loadData(db);   
  32.   }   
  33. };  
var request = window.indexedDB.open("CandyDB",
                                    "My candy store database");
request.onsuccess = function(event) {
  var db = event.result;
  if (db.version != "1") {
    // User's first visit, initialize database.
    var createdObjectStoreCount = 0;
    var objectStores = [
      { name: "kids", keyPath: "id", autoIncrement: true },
      { name: "candy", keyPath: "id", autoIncrement: true },
      { name: "candySales", keyPath: "", autoIncrement: true }
    ];

    function objectStoreCreated(event) {
      if (++createdObjectStoreCount == objectStores.length) {
        db.setVersion("1").onsuccess = function(event) {
          loadData(db);
        };
      }
    }

    for (var index = 0; index < objectStores.length; index++) {
      var params = objectStores[index];
      request = db.createObjectStore(params.name, params.keyPath,
                                     params.autoIncrement);
      request.onsuccess = objectStoreCreated;
    }
  }
  else {
    // User has been here before, no initialization required.
    loadData(db);
  }
};


关于Indexed的更多介绍可以参看Mozilla Blog的这篇指南。

--------
本文编译整理自：Mark Pilgrim的Dive Into HTML5 第七章 HTML5本地存储，编译：@yuanyiz。

分享到：
| javascript跨域解决方案(二)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html5权威指南

    5. HTML5的本地存储和离线应用 HTML5为Web应用提供了客户端存储的能力，如Web Storage（包括localStorage和sessionStorage）、Web SQL Database以及IndexedDB等。这些技术使得网页能够保存数据到本地，提高应用的...

    Html5进阶指南代码

    1. **离线存储**：HTML5引入了离线存储（AppCache）机制，允许开发者将部分网站内容缓存到本地，即使在网络不稳定或无网络的情况下，用户也能访问这些页面。 2. **Canvas绘图**：HTML5的Canvas元素提供了一个基于...

    HTML 5与CSS 3权威指南 第2版 代码清单.rar

    4. 存储机制：引入了localStorage和sessionStorage，使得网页可以本地存储数据，实现离线应用。 5. 语义化：通过新的元素和属性，增强了文档的语义，使搜索引擎优化（SEO）和辅助技术更加友好。 CSS3是层叠样式表...

    html5开发指南

    《HTML5开发指南》深入解析 HTML5是下一代超文本标记语言，它的出现极大地扩展了Web应用程序的功能，为开发者提供了更强大的工具和更多的可能性。在移动设备领域，HTML5更是扮演了关键角色，使得开发者可以构建跨...

    HTML5 权威指南 高清，带目录

    《HTML5 权威指南》是一本详细深入介绍这一技术的书籍，高清版确保了阅读的舒适度，而带目录的设计则使得学习和查阅更为便捷。 HTML5的核心目标是提高网络应用的性能，简化开发过程，并且增强在不同设备上的兼容性...

    html5游戏开发进阶指南源码

    7. **存储与数据管理**：HTML5的Web Storage和IndexedDB提供了本地数据存储，用于保存游戏进度、用户数据等。 8. **网络通信**：WebSocket或XMLHttpRequest可以用于实现多人在线游戏或实时同步。源码可能包含如何...

    HTML5与CSS3实战指南

    与上一版本相比，HTML5引入了许多新特性，包括支持多媒体内容（如音频和视频）、新的语义元素（比如`&lt;article&gt;`、`&lt;section&gt;`、`&lt;nav&gt;`等）、表单元素的增强以及对离线存储和本地数据库的支持等。这些新特性使得...

    前端开发 html5 权威指南 完整版

    7. Web存储：HTML5的localStorage和sessionStorage API提供了本地存储机制，允许网站在用户的浏览器中持久化数据，增强了离线应用的能力。 8. Geolocation API：通过Geolocation API，开发者可以获取用户的地理位置...

    HTML5 移动WEB开发指南

    HTML5提供了Web Storage（包括localStorage和sessionStorage）和IndexedDB两种本地数据存储机制。前者用于简单键值对存储，数据持久化，适合小量数据的管理；后者是NoSQL数据库，适用于大量复杂数据的存储和查询。 ...

    html5游戏开发指南

    4. **离线存储（localStorage和sessionStorage）**：游戏数据的本地存储机制，用于保存用户进度、游戏设置等，使得游戏在离线状态下仍能正常运行。 5. **Web Workers**：在后台线程中执行脚本，提高计算密集型任务...

    HTML5 WebSocket权威指南 PDF电子书下载 带书签目录 高清完整版

    HTML5旨在为丰富网页应用提供支持，包括视频播放、本地存储、2D/3D图形绘制、离线存储和实时通信等功能。HTML5的主要特性包括： 1. 语义化标签：HTML5引入了许多新的语义化标签，如 article, section, header, ...

    Html5 快速索引指南

    这份“HTML5快速索引指南”是针对那些希望迅速掌握这一技术的专业人士或初学者设计的，它以简洁、实用的方式整理了HTML5的关键知识点。 一、HTML5的基本结构 HTML5的文档类型声明简化为`&lt;!DOCTYPE html&gt;`，这标志着...

    HTML5用户指南英文版Introducing HTML5

    - **离线存储**：HTML5提供了本地存储功能，包括localStorage和sessionStorage，使得网页可以在没有网络连接的情况下正常运行。 - **媒体元素**：HTML5增强了对视频和音频的支持，通过`&lt;video&gt;`和`&lt;audio&gt;`标签可以...

    HTML5新手入门指南

    综上所述，HTML5不仅仅是简单的标记语言，而是一个全面的开发平台，它集合了HTML、CSS和JavaScript的优势，为开发者提供了前所未有的可能性。随着技术的不断进步，HTML5将在未来继续发挥重要作用。

    《HTML5移动Web开发指南》.(唐俊开)

    Web Storage则提供了比Cookie更大的本地存储空间，用于数据持久化。 移动Web开发方面，书中的内容可能涉及： 1. **响应式设计**：为了适配不同尺寸和方向的屏幕，开发者需要了解如何使用媒体查询（Media Queries）...

    HTML5移动开发指南

    这些新的特性包括本地存储、离线应用、多线程等，为移动Web提供了更加丰富的交互体验和更好的性能表现。 HTML5的出现，尤其是在移动端的应用，逐渐削弱了Adobe Flash在Web上的统治地位。HTML5的跨平台特性使得网页...

Magicbox
Global site tag (gtag.js) - Google Analytics