HTML5本地存儲localStorage、sessionStorage及IE專屬UserData

HTML5本地存儲localStorage、sessionStorage及IE專屬UserData

 

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

　　1、localStorage是什麼？

　　localStorage用於持久化的本地存儲，除非手動刪除數據，不然數據永不過時。

　　2、相比於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這麼好用，可是IE六、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麻煩一些，但仍是很簡單，過程分爲如下幾步：

　　一、建立HTML標籤

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

　　3 、設置數據過時時間

　　四、載入UserData

　　五、存入數據/讀取數據/刪除數據

　　六、保存數據到存儲區

　　看代碼更容易理解（特別注意：如下代碼請在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>

　　總結：在IE六、IE7市場份額逐漸降低的狀況下，localStorage和sessionStorage將會應用的愈來愈普遍，cookie除了在某些必要的狀況下，徹底能夠用localStorage替代，固然，不建議在localStorage裏面保存敏感數據，由於localStorage能夠隨時讀取修改或刪除。

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

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