說說localStorage

HTML5的本地存儲是大勢所趨，若是僅存儲在內存中，則是sessionStorage，他們的語法都是同樣，僅僅是一個存儲在本地文件系統中，另外一個存儲在內存中（隨着瀏覽器的關閉而消失），其語句以下：

localStorage.setItem('a', 'xxxxxx');  // 設置
localStorage.getItem('a');  // 獲取
localStorage.removeItem('a'); // 刪除

下面說說有關localStorage和sessionStorage的特性。

一、存儲格式

僅僅存儲字符串類型的對象（雖然規範中能夠存儲其餘原生類型的對象，可是目前爲止沒有瀏覽器對其進行實現）。

二、生命週期

在數據存儲的時效性上，localStorage並不會像cookie那樣能夠設置數據存活的時限。也就是說，只要用戶不主動刪除，localStorage存儲的數據將會永久存在。

三、存儲位置

固然，對於localStorage數據的存儲，是存在於本地的文件系統中的，例如，對於chrome來講，localStorage數據的存儲位置是在：C:\Users\{userName}\AppData\Local\Google\Chrome\User Data\Default\Local Storage中。對於其餘4大瀏覽器，你們能夠自行查找進行查看。

四、數據共享

不一樣瀏覽器沒法共享localStorage或sessionStorage中的信息。相同瀏覽器的不一樣頁面間能夠共享相同的localStorage（頁面屬於相同域名和端口），可是不一樣頁面或標籤頁間沒法共享sessionStorage的信息。這裏須要注意的是，頁面及標籤頁僅指頂級窗口，若是一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是能夠共享sessionStorage的。

五、兼容性

能夠看到，除IE外的其餘瀏覽器很早的版本都支持了，對於IE低版本系列的瀏覽器，咱們須要一個兼容方案來處理。

微軟在IE5.0之後，自定義了一種持久化用戶數據的概念userData，這種存儲方式只有IE瀏覽器本身支持。來看看其如何操做——

(function(win) {
    // 對於IE，且不支持localStorage的瀏覽器
    // 即針對IE6/7
    if ( typeof win.attachEvent != "undefined" && typeof win.localStorage == "undefined") {
        var localFileName = "_simulateLocalStorage", 
            expires = 365,
            formField = null;
        
        // 設置有效期爲365天
        var expire = new Date();
        expire.setDate(expires + expire.getDate());
        
        formField = document.createElement("input");
        formField.type = "hidden";
        formField.addBehavior('#default#userData');
        
        document.body.appendChild(formField);
    
        var storage = {
            setItem : function(key, value) {
                formField.load(localFileName);
                formField.setAttribute(key, value);
                formField.save(localFileName);
            },
            getItem : function(key) {
                formField.load(localFileName);
                return formField.getAttribute(key);
            },
            removeItem : function(key) {
                formField.load(localFileName);
                formField.removeAttribute(key);
                formField.save(localFileName);
            },
            clear : function() {
                formField.load(localFileName);
                var d = new Date();
                d.setDate(d.getDate() - 1);
                formField.expires = d.toUTCString();
                formField.save(localFileName);
            }
        };
    
        win["localStorage"] = storage;
    }
})(window);

這裏僅僅是對IE兼容性的簡單包裝，下面的連接給出很是完善的針對localStorage兼容性的解決方案。

https://github.com/machao/localStorage

六、存儲大小

對於HTML5的localStorage而言，其大小支持爲5M（固然，各瀏覽器的大小差別仍是有的）。對於IE的userData，用戶數據的每一個域最大爲64KB。

七、應用場景

建議不要使用localStorage方式存儲敏感信息，哪怕這些信息進行過加密。另外，對身份驗證數據使用localStorage進行存儲還不太成熟。咱們知道，一般能夠經過xss漏洞來獲取到Cookie，而後用這個Cookie進行身份驗證登陸，可是瀏覽器能夠經過HttpOnly來保護Cookie不被XSS攻擊獲取到。而localStorage存儲沒有對XSS攻擊有任何防護機制，一旦出現XSS漏洞，那麼存儲在localStorage裏的數據就極易被獲取到。

 

參考：

1> 《Web前端黑客技術揭祕》

2> github-machao-localStorage

3> HTML5 LocalStorage 本地存儲

4> localStorage、sessionStorage用法總結