本地存儲—localStorage（HTML5）

localStorage簡介

今夜死活睡不着，決定整理下最近搞得localStorage……

先簡單說下闡述下：localStorage    規範：http://dev.w3.org/html5/webstorage/

localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。可是若是你找到瀏覽器的隱私或者本地存儲的數據刪除也是同樣能夠刪除的！我找了下Safari瀏覽器以下圖：

存儲空間較大：IE8下每一個獨立的存儲空間爲10M，其餘瀏覽器實現略有不一樣，但都比Cookie要大不少不少。本地存儲不發生服務器，是離線保存在你瀏覽器本地的！不會與服務器發生任何交互。本地存儲數據庫在一樣域名下的網頁間是共享的，即使是在多個瀏覽器標籤頁中。我在作產品購物車的時間使用到了，這邊選擇產品，把產品屬性拼接成JSON字符串保存到localStorage中，而後到購物車中去取……

獨立的存儲空間：每一個域（包括子域）有獨立的存儲空間，各個存儲空間是徹底獨立的，所以不會形成數據混亂。當把當前網頁或者瀏覽器關掉並再進入時，localStorage中的數據仍是存在的。那麼，這個數據是存在什麼地方的呢？查找後發現對於Chrome Browser, 其缺省存在如下地址：C:/Documents and Settings/UserName/Local Settings/Application Data/Google/Chrome/User Data/Default/Local Storage

支持瀏覽器也至關普遍！幾乎支持html5的都支持。包括移動……下圖不完整（WPX也是支持的）

判斷瀏覽器是否支持本地存儲：

一：

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}

localStorage使用方法

localStorage的用法極其簡單！（Map格式（鍵-值））一共就這麼多……

localStorage. length;    返回如今已經存儲的變量數目
localStorage. key(n);    返回第n個變量的鍵值(key)
localStorage.getItem(key);      和localStorage.key同樣，取得鍵值爲key的變量的值
localStorage.setItem(key, val);     和localStorage.key = val同樣，設置鍵值key的變量值
localStorage.removeItem(key);     刪除鍵值爲key的變量
localStorage.clear();   清空全部變量

用法不少，能夠當成是一個對象方式使用……

localStorage.a = 1;      //設置a爲"1"
localStorage["a"] = "FakeMr";      //設置a爲"FakeMr"，自動覆蓋上面的值。

須要注意的是，HTML5本地存儲只能存字符串，任何格式存儲的時候都會被自動轉爲字符串，因此讀取的時候，須要本身進行類型的轉換。（我的比較喜歡：JSON.parse/JSON.stringify結合使用 ）

拓展：IE6/7解決方案（網上搜的）

if(!window.localStorage && /MSIE/.test(navigator.userAgent)){  
    if(!window.UserData) {  
        window.UserData = function(file_name) {  
            if(!file_name) file_name="user_data_default";  
            var dom = document.createElement('input');  
            dom.type = "hidden";  
            dom.addBehavior ("#default#userData");  
            document.body.appendChild(dom);  
            dom.save(file_name);  
            this.file_name = file_name;  
            this.dom = dom;  
            return this;  
        };  
        window.UserData.prototype = {  
            setItem:function(k, v) {  
                this.dom.setAttribute(k,v);  
                this.dom.save(this.file_name);  
            },  
            getItem:function(k){  
                this.dom.load(this.file_name);  
                return this.dom.getAttribute(k);  
            },  
            removeItem:function(k){  
                this.dom.removeAttribute(k);  
                this.dom.save(this.file_name);  
            },  
            clear:function() {  
               this.dom.load(this.file_name);  
               var now = new Date();  
               now = new Date(now.getTime()-1);  
               this.dom.expires = now.toUTCString();  
               this.dom.save(this.file_name);  
            }  
        };  
    }  
    window.localStorage = new window.UserData("local_storage");  
}

PS：不支持原生 localStorage全部方法，只支持4種擴展出來的自定義方法……固然你還能夠多多擴展（多多益善嘛！！）

❤犒勞一杯咖啡❤

                                                                                                        做者：Fake Mr