HTML5本地存储不完全指南

转自 http://www.iteye.com/magazines/62-html5-local-storage

编辑推荐:这篇文章来自于黑客志,对HTML5的本次存储方式进行了非常全面的介绍和分析,对于学习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. }  

HTML5 Storage的使用非常简单: 
代码 
  1. var foo = localStorage.getItem("bar");  
  2. // ...  
  3. localStorage.setItem("bar", foo);  

你也可以写成下面这样: 
代码 
  1. var foo = localStorage["bar"];  
  2. // ...  
  3. localStorage["bar"] = foo;  

如果要将某个key从存储空间删除,可以调用removeItem: 
代码 
  1. localStorage.removeItem('foo');  


你也可以像遍历数组那样遍历存储的所有键值对象: 
代码 
  1. for(var i=0; ivar key = localStorage.key(i);  
  2.     console.log(key + ":" + localStorage[key]);  
  3. }  

如果你的程序需要在不同页面访问同一个值,你可能需要了解这个值是否已经被其他页面改变了,这可以通过向浏览器注册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';  

这时你应该会在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”的错误。 


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

你可能感兴趣的:(html5)