編輯推薦：這篇文章來自於黑客志，對HTML5的本次儲存方式進行了非常全面的介紹和分析，對於學習HTML5的開發者來說，不容錯過哦。
歷史在HTML5本地儲存之前，如果我們想在客戶端保存持久化數據，有這麼多選擇：
HTTP Cookie。 HTTP cookie的缺點很明顯，最多只能儲存4KB的數據，每個HTTP請求都會傳送回伺服器，明文傳輸（除非你使用SSL）。
IE userData。 userData是微軟在90年代的瀏覽器大戰時推出的本地存儲方案，借助DHTML的behaviour屬性來存儲本地數據， 允許每個頁面最多存儲64K數據，每個站點最多640K數據，userData的缺點顯而易見，它不是Web標準的一部分，除非你的程式只需要支援IE， 否則它基本上沒什麼用處。
Flash cookie。 Flash cookie的名字有些誤導，它實際上和HTTP cookie並不是一回事，也許它的名字應該叫做"Flash本地存儲”，Flash cookie默認允許每個站點存儲不超過100K的數據，如果超出了，Flash會自動向使用者要求更大的儲存空間，借助Flash的ExternalInterface接口，你可以很輕鬆地透過Javascript操作Flash的本機儲存。 Flash的問題很簡單，就是因為它是 Flash。
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 StorageWeb Storage是目前被支援最廣泛的HTML5本機儲存規格：IE 8 、FF 3.5 、Safari 4 、Chrome 4 、Opera 10.5 ，以及iPhone 2 和Android 2 都已經支援Web Storage，要判斷你的瀏覽器是否支援Web Storage，可以使用下面這個函數：
程式碼
function supports_html5_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);
你也可以写成下面这样：
代码
var foo = localStorage["bar"]; // ... localStorage["bar"] = foo;
如果要将某个key从存储空间删除，可以调用removeItem：
代码
localStorage.removeItem( 'foo' );
你也可以像遍历数组那样遍历存储的所有键值对象：
代码
for(var i=0; ivar key = localStorage.key(i);
console.log(key + ":" + localStorage[key]);
}
如果你的程序需要在不同页面访问同一个值，你可能需要了解这个值是否已经被其他页面改变了，这可以通过向浏览器注册storage事件来实现：
代码
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 DatabaseWeb SQL Database是一个已经废弃的规范，但是鉴于除了IE和Firefox，其他浏览器都已经实现了Web SQL Database，并且它还具有一些HTML5 Storage所不具有的特性，所以还是值得了解一下的。
Web SQL Database就像它的名字那样，就是一个让你可以在Web上直接使用的SQL数据库，你要做的就是打开数据库，然后执行SQL，和你对Mysql做的事情没什么两样：
代码
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中的所有变更都是基于“事务”的。
下面让我们来看一个小例子：
代码
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的这篇指南。
本文讲解了关于HTML5本地存储的相关内容，更多相关内容请关注php中文网。
相关推荐：
以上是關於HTML5本地儲存的相關解說的詳細內容。更多資訊請關注PHP中文網其他相關文章！
