### [Web 前端實現本地存儲](https://segmentfault.com/a/1190000002701423)
* * * * *
桌面應用程序一直優于web應用程序一個很重要的原因是它的本地化存儲得到了很好的支持。對于本地應用程序，操作系統會提供一個抽象層，用于存儲和獲取特定于應用程序的數據，這些數據可以存儲于注冊表、INI文件，或者其他什么地方，這取決于操作系統的實現，如果本地應用程序需要不單是鍵值對形式的本地存儲，可以使用嵌入式數據庫或其他很多種解決方案。而對于web應用程序，它的本地存儲一步一步走到今天的HTML5本地存儲是非常不容易的。為了描述它的歷史，我們可以先看一張圖片：
從圖片可以看出，無論是從存儲數據的大小還是兼容性來看，web前端本地存儲都走得不容易。在著重介紹HTML5本地存儲之前，我們先來看一看前面幾個存儲方式的概念。
HTTP cookie：HTTP cookie的缺點很明顯，最多只能存儲4KB的數據，每個HTTP請求都會被傳送回服務器，明文傳輸（除非你使用SSL）。
在這里簡單介紹一下Cookie。Cookie是為了解決HTTP無狀態的特性而出現的，也可以叫用戶識別機制。常用的用戶識別機制包括：
1. 承載用戶信息的HTTP首部
2. 客戶端IP地址追蹤技術，通過用戶的IP地址對其進行識別
3. 用戶登錄，用認證機制來識別用戶
4. 胖URL，一種在URL中嵌入識別信息的技術
5. cookie，一種強大且高效的持久身份識別技術
對于購物網站而言，cookie是非常重要的，為了實現購物車功能，把已選物品加入cookie，可以實現不同頁面之間數據的同步，同時在提交訂單的時候又會把這些cookie傳到后臺，大大方便了前后端開發
userData是微軟在上世紀90年代的瀏覽器大戰時推出的本地存儲方案，借助DHTML的behaviour屬性來存儲本地數據， 允許每個頁面最多存儲64K數據，每個站點最多640K數據，userData的缺點顯而易見，它不是Web標準的一部分，除非你的程序只需要支持IE， 否則它基本沒什么用處。
Flash cookie的名字有些誤導，它實際上和HTTP cookie并不是一回事，或許它的名字應該叫做"Flash本地存儲”，Flash cookie默認允許每個站點存儲不超過100K的數據，如果超出了，Flash會自動向用戶請求更大的存儲空間，借助Flash的 ExternalInterface接口，你可以很輕松地通過Javascript操作Flash的本地存儲。Flash的問題很簡單，就是因為它是 Flash。
Gears是Google在07年發布的一個開源瀏覽器插件，旨在改進各大瀏覽器的兼容性，Gears內置了一個基于SQLite的嵌入式 SQL數據庫，并提供了統一API對數據庫進行訪問，在取得用戶授權之后，每個站點可以在SQL數據庫中存儲不限大小的數據，Gears的問題就是 Google自己都已經不用它了。
從上面的簡介我們可以看出，在以前，本地存儲面臨的主要問題是，對于存儲容量較大的方式，需要特定的插件支持；對于不需要插件支持的存儲方式，則處于安全問題或者大小限制而遭到扼殺。在這種雙重的矛盾面前，HTML5本地存儲橫空出世，對于前端開發人員是一種巨大的福音。
所謂的HTML5本地存儲更精確的說法應該是DOM存儲。根據MDN的定義，DOM存儲的機制是通過存儲字符串類型的鍵/值對,來提供一種安全的存取方式.這個附加功能的目標是提供一個全面的,可以用來創建交互式應用程序的方法(包括那些高級功能,例如可以離線工作一段時間)。
HTML5的DOM存儲分成兩種：SessionStorage和LocalStorage。在當代瀏覽器中的兼容性如下：
上圖中提及的globalStorage是非標準的，已經廢棄，在這里我們直接忽略它。而sessionStorage和localStorage在絕大部分現代瀏覽器中已經得到了很好的支持，但是既然是絕大部分，就必須照顧那些還不支持這兩個對象的瀏覽器。為了檢測瀏覽器是否支持這兩個對象，我們可以簡單的用下面的代碼來檢測：
~~~
function storageSupport() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
~~~
非常幸運的是，這兩種對象的使用方式都非常簡單，這里借用網上 的一張圖：
首先我們來看一看sessionStorage，sessionStorage 是個全局對象，它維護著在頁面會話(page session)期間有效的存儲空間。只要瀏覽器開著，頁面會話周期就會一直持續。當頁面重新載入(reload)或者被恢復(restores)時，頁面會話也是一直存在的。每在新標簽或者新窗口中打開一個新頁面，都會初始化一個新的會話。這句話看起來比較抽象，我們直接看一個demo：
~~~
sessionStorage.setItem("myname","yuanzm");
alert(sessionStorage.getItem("myname"));
~~~
當我們在瀏覽器中打開的時候，就會彈出窗口，顯示“yuanzm”，然后我們按F12鍵，查看瀏覽器的調試窗口：
我們能夠發現，在瀏覽器的本地存儲sessionStorage中已經有了key值為“myname”的項。這個時候，刷新頁面，仍然會彈出“yuanzm”，因為如果不調用sessionStorage.removeItem()或者手動清除這個項的話，這個項將一直存在。而上面提到的“只要瀏覽器開著，頁面會話周期就會一直持續。當頁面重新載入(reload)或者被恢復(restores)時，頁面會話也是一直存在的。每在新標簽或者新窗口中打開一個新頁面，都會初始化一個新的會話”的意思是說，如果我們不重新設置myname的值，在新打開一個瀏覽器標簽或者再次打開一個瀏覽器窗口的時候，這個值是不存在的，也就是null。為了驗證這一點，很簡單，我們把上面兩行代碼的第一行注釋掉，然后刷新頁面，接著在新的瀏覽器標簽中打開這個文件。這兩個動作分別會產生什么效果呢？答案很簡單，當再次刷新頁面的時候，仍然會彈出“yuanzm”，因為這個數據已經保存在本地了，而修改代碼之后在新的頁面打開，得到的結果是null，因為當前頁面會話中沒有“myname”這個值。
接下來我們看一看localStorage，他是跨多個窗口，且持續范圍可超過當前會話；意味著當瀏覽器關閉再重新打開，數據依然是可用的；拿上面的例子來說，當修改代碼之后，在新的標簽打開頁面，仍然會彈出“yuanzm”，我們再次在瀏覽器中查看效果：
由于這兩個對象的使用很簡單，暫時就介紹到這里。下面還需要介紹一下的就是兼容性問題。原因很簡單，因為并不是所有的瀏覽器都支持這兩個對象。這里的兼容包括兩種，第一種是在沒有原生支持localStorage的瀏覽器中使用，第二種是兼容不同瀏覽器對于這兩種用法的差異。對于第一種，MDN給出了兼容代碼：
~~~
if (!window.localStorage) {
Object.defineProperty(window, "localStorage", new (function () {
var aKeys = [], oStorage = {};
Object.defineProperty(oStorage, "getItem", {
value: function (sKey) { return sKey ? this[sKey] : null; },
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "key", {
value: function (nKeyId) { return aKeys[nKeyId]; },
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "setItem", {
value: function (sKey, sValue) {
if(!sKey) { return; }
document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
},
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "length", {
get: function () { return aKeys.length; },
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "removeItem", {
value: function (sKey) {
if(!sKey) { return; }
var sExpDate = new Date();
sExpDate.setDate(sExpDate.getDate() - 1);
document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
},
writable: false,
configurable: false,
enumerable: false
});
this.get = function () {
var iThisIndx;
for (var sKey in oStorage) {
iThisIndx = aKeys.indexOf(sKey);
if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
else { aKeys.splice(iThisIndx, 1); }
delete oStorage[sKey];
}
for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId < aCouples.length; iCouplId++) {
iCouple = aCouples[iCouplId].split(/\s*=\s*/);
if (iCouple.length > 1) {
oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]);
aKeys.push(iKey);
}
}
return oStorage;
};
this.configurable = false;
this.enumerable = true;
})());
}
~~~
至于第二種，在github上面有很多優秀的代碼，博主這里推薦其中一份：https://github.com/mortzdk/localStorage
* * * * *
2015年04月23日發布 更多
https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/Storage
