HTML5本機存放區localStorage、sessionStorage及IE專屬UserData，html5localstorage

HTML5本機存放區localStorage、sessionStorage及IE專屬UserData，html5localstorage
HTML5本機存放區localStorage、sessionStorage及IE專屬UserData 

　　在用戶端儲存資料用的最普遍的方式非cookie莫屬，隨著HTML5的普及，新的本機存放區方式localStorage和sessionStorage將在標準瀏覽器上大展身手。localStorage和sessionStorage是HTML5的新特性之一，說是新特性，其實微軟公司早在IE8上就已經支援localStorage和sessionStorage這兩個api了，只不過在IE8、9下測試這兩個api時，務必在伺服器環境下測試，在本地環境會報錯。

　　一、localStorage是什嗎？

　　localStorage用於持久化的本機存放區，除非手動刪除資料，否則資料永不到期。

　　二、相比於cookie，localStorage有什麼優點？

　　如下表，羅列出了cookie和localStorage的特性

特性	localStorage	cookie
容量大小	5M	4k左右
相容性	IE8及以上瀏覽器	基本上所有瀏覽器都相容
到期時間	永不到期	可自訂
是否隨HTTP發送到服務端	否	是（佔用頻寬）
範圍	子網域名稱之間相互獨立	可通過.setDomain設定主網域名稱共用

　　localStorage的優點很明顯，容量大、不會佔用頻寬，除此之外，localStorage提供了豐富的方法去設定、讀取、移除資料。
　　localStorage.setItem(key,value)  // 設定索引值對
　　localStorage.getItem(key)  // 通過索引值讀取對應的值
　　localStorage.removeItem(key)  // 通過索引值移除對應的值
　　localStorage.clear()  // 初始化localStorage，清除所有索引值對
　　localStorage.key(index) // 通過下標index來擷取指定索引的key名

 　　sessionStorage跟localStorage長的差不多，那他們之間有什麼差別呢？唯一的差別就在於它們儲存資料的持久性上面，localStorage儲存的資料永不到期，sessionStorage儲存的資料在瀏覽器視窗關閉之後就消失了，不關閉瀏覽器視窗只重新整理頁面的話，sessionStorage儲存的資料是依然存在的。它們擁有相同的屬性和方法。

　　雖然sessionStorage和localStorage這麼好用，但是IE6、IE7上面不支援，我們可以通過IE專屬的UserData來彌補這個缺陷，UserData是早期IE瀏覽器用來本機存放區資料用的，UserData的資料是以檔案的形式儲存在磁碟上，UserData需要依附於一個HTML標籤來設定、讀取、移除資料，並不是所有HTML標籤都可以，支援的HTML標籤有：

　　A, ABBR, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FONT, FORM, hn, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LI, LISTING, MAP, MARQUEE, MENU, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, XMP。

　　 UserData對資料的大小同樣有一定的限制（從MSDN文檔翻譯過來的，英文水平好的建議看英文文檔）：

網站類型	單個檔案大小限制（KB）	單個網域名稱的資料大小限制（KB）
本地機	128	1024
區域網路	512	10240
受信任的網站	128	1024
互連網	128	1024
受限網站	64	640

　　從表格上面可以看出，要相容各種情況的話，建議單個UserData檔案大小不超過64KB。

　　利用UserData來儲存資料比localStorage麻煩一些，但還是很簡單，過程分為以下幾步：

　　1、建立HTML標籤

　　2、給HTML標籤添加樣式behavior:url(‘#default#userData’)或者js給HTML對象設定.addBehavior ("#default#userData")

　　3 、設定資料到期時間

　　4、載入UserData

　　5、存入資料/讀取資料/刪除資料

　　6、儲存資料到儲存區

　　看代碼更容易理解（特別注意：以下代碼請在body標籤內部調用，在head標籤內的script裡調用提示沒有許可權，原因未知）：

<script type="text/javascript">    var UserData = {        userData: null,        name: document.location.hostname,        init: function() {            if (!this.userData) {                try {                    this.userData = document.createElement("INPUT");                    this.userData.type = "hidden";                    this.userData.style.display = "none";                    this.userData.addBehavior("#default#userData");                    document.body.appendChild(this.userData);                    var expires = new Date();                    expires.setDate(expires.getDate() + 365);                    this.userData.expires = expires.toUTCString();                } catch (e) {                    return false;                }            }            return true;        },        setItem: function(key, value) {            if (this.init()) {                this.userData.load(this.name);                this.userData.setAttribute(key, value);                this.userData.save(this.name);            }        },        getItem: function(key) {            if (this.init()) {                this.userData.load(this.name);                return this.userData.getAttribute(key)            }        },        remove: function(key) {            if (this.init()) {                this.userData.load(this.name);                this.userData.removeAttribute(key);                this.userData.save(this.name);            }        }    };</script>

　　總結：在IE6、IE7市場份額逐漸下降的情況下，localStorage和sessionStorage將會應用的越來越廣泛，cookie除了在某些必要的情況下，完全可以用localStorage替代，當然，不建議在localStorage裡面儲存敏感性資料，因為localStorage可以隨時讀取修改或刪除。

　　參考文檔：http://www.css88.com/archives/3717

By：王美建 from：http://www.cnblogs.com/wangmeijian/p/4518606.html 轉載請保留署名和出處！