瀏覽器存儲的區別(sessionStorage, localStorage, cookie)

sessionStorage

做用域： 限定在文檔源(document origin)級別；此外還限定在窗口中，即同源文檔在不一樣的瀏覽器標籤頁中沒法共享數據（*若是一個瀏覽器包含兩個元素，它們包含的文檔是同源的，那麼二者能夠共享數據）。

有效期： 當該網頁的標籤頁被關閉，那麼全部經過seesionStorage存儲的數據都會被刪除。

localStorage

做用域： 限定在文檔源(document origin)級別，也受瀏覽器供應商的限制，沒法跨瀏覽器讀寫數據。

有效期： 存儲的數據是永久性的，除非Web應用能夠刪除存儲的數據，不然數據將一直存儲在用戶的電腦上，永不過時。

cookie

cookie數據會自動跟隨http請求在web瀏覽器和web服務器之間傳輸。

做用域： 默認是限定在文檔源(document origin)級別。而且默認與建立它的頁面有關，並對該web頁面以及和gaiweb頁面同目錄或者子目錄的其餘web頁面可見，如http://www.a.com/b/index.html建立一個cookie，那麼該cookie對頁面http://www.a.com/b/other.html及http://www.a.com/b/c/index.html可見，但對http://www.a.com/a/index.html不可見。但能夠經過設置cookie的domain屬性(cookie的域只能設置爲當前的服務器的域)和path屬性來改變。

有效期： 默認保存到瀏覽器關閉爲止(*非標籤頁關閉),能夠經過max-age屬性來明確告訴瀏覽器cookie的有效期。

保存cookie：

function setcookie(name, vlaue, liveTime){
    var cookie = name+'='+encodeURIComponent(value);
    if(typeof liveTime === 'number'){
        cookie += ";max-age="+liveTime;
    }
    document.cookie = cookie;
}
複製代碼

若是要設置cookie的path和domain屬性，只需以添加max-age屬性相同的形式追加在cookie值後面便可。 若是需刪除一個cookie，給該cookie值賦空值，並將max-age設置爲0便可。