localStorage 真正的本地緩存。（sessionStorage、cookie）

window.localStorage：

　　（翻譯：窗口的本地存儲）

　　體積5M，據說未來還會增大

　　生命周期，只要不清都在

　　在localStorage中只能以字符串的形式進行保存，所以在存入localStorage之前，我們需要將json格式的數據進行轉化成string格式。

獲取對象：

var storage=localStorage;  // 全局屬性，所以 window. 可以省略

三種寫入方式：

　　localStorage.setItem( ' key ' , ' value ‘ ) // 對象需要用JSON.stringify(obj) 包起來，

    //寫入a字段     
    storage["a"]=1;     
    //寫入b字段     
    storage.b=1;     
    //寫入c字段     
    storage.setItem("c",3);

三種讀取方式：

　　localStorage.getItem( ' key ' )

    //第一種方法讀取     
    var a=storage.a;     console.log(a);     
    //第二種方法讀取     
    var b=storage["b"];  console.log(b);     
    //第三種方法讀取     
    var c=storage.getItem("c");

刪除：

　　localStorage.removeItem( ' key ' )

清空：

　　localStorage.clear( )

onstorage( ) 事件：

　　當本地緩存修改的時候，自己不觸發，兄弟（旁邊）頁面觸發

sessionStorage：

　　sessionStorage 的所有方法和 localStorage 一樣。

　　sessionStorage 用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問。並且當會話結束后（關閉頁面）數據也隨之銷毀。因此 sessionStorage 不是一種持久化的本地存儲，僅僅是會話級別的存儲。只允許同一窗口訪問。

　　而 localStorage 用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。同源可以讀取並修改 localStorage 數據。

Cookie、 sessionStorage、localStorage 的異同

特性	Cookie	localStorage	sessionStorage
數據的生命期	一般由服務器生成，可設置失效時間。如果在瀏覽器端生成Cookie，默認是關閉瀏覽器后失效	除非被清除，否則永久保存	僅在當前會話下有效，關閉頁面或瀏覽器后被清除
存放數據大小	4K左右	一般為5MB
與服務器端通信	每次都會攜帶在HTTP頭中，如果使用cookie保存過多數據會帶來性能問題	僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信
易用性	需要程序員自己封裝，源生的Cookie接口不友好	源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持

 

2018-12-14