[0]-JavaScript中的localStorage和sessionStorage

l  內容目錄

　　簡介

　　Storages的使用

　　Storages VS Cookie

　　最後

l  簡介

　　文中代碼建議在Chrome/360Chrome下執行。

　　HTML5中新增長了localStorage和sessionStorage，二者都是window的對象，能夠經過window.localStorage/window.sessionStorage訪問，用於保存數據，只是保存的範圍略有不一樣。

　　下文中的Storage表示window.localStorage和window.sessionStorage。

l  Storages的使用

　　1) 二者異同

　　　　都以鍵值對的形式存儲數據，數據的鍵和值都是String類型

　　　　localStorage存儲在本地，除非手動清除不然數據不會過時消失

　　　　sessionStorage伴隨session存在，窗口關閉後存儲在sessionStorage的數據將消失

　　2) 繼承關係

　　　　localStorage和sessionStorage都是Storage的實例

　　　　

　　　　經過console.dir(localStorage)列出localStorage中存儲的數據，咱們發現了一個叫作__proto__的屬性

      　　

　　　　對象的__proto__會指向生成該對象構造函數的prototype屬性。

　　　　咱們經過查找localStorage.__proto__也知道了localStorage是Storage的實例。

　　　　實際上JavaScript的instanceof運算符就是經過這種形式判斷一個對象是不是一個類的實例。

　　3) 使用

　　　   咱們能夠看到Storage中定義的方法:

clear() 清除存儲的全部數據

getItem(String key) 獲取key對應的value，返回的value爲String類型

key(Number|String index) 獲取指定索引數據的Key，若是index沒法被轉換成數字將返回key(0)的返回值，若是index指定的索引沒有存儲任何數據將返回null，不傳遞參數將會拋出Error

removeItem(String key) 移除key指定的鍵值對

      setItem(String key, String value) 設置鍵和值，參數都會被轉換爲字符串

---

 

　　在實際開發中咱們不免要使用Storages存儲String之外的內容，好比存儲Object、Array等。

　　那麼就來嘗試一下存取Object，在Chrome開發者工具下執行代碼後查看Resources選項卡：

　　

　　咱們發現"person"對應的值是"[object Object]"，讓咱們再將person取出

　　

　　返回的居然是"[object Object]"的字符串，這是爲何呢？不急，咱們再按照剛纔的步驟存取一個Array

　　

　　咱們發現打印剛剛存儲的numbers經過typeof運算符查看其類型是String

　　相信前面仔細看的同行們已經知道了：由於存儲在Storage中的數據都會被轉換成字符串，對於Object和Array這類對象，在存儲時會調用其toString()方法（這一點與Java中的System.out.println()傳入對象時會默認調用toString()方法是同樣的）。

　　如此一來咱們對象實際存儲的屬性沒法獲取，可是在實際開發中如此利器（可讀可寫，數據永不丟失，最大5MB，已提供的讀寫接口）只保存字符串又有點惋惜，那可否有一種方法可讓Storage存儲對象或數組呢？你知道JSON嗎？咱們能夠經過window.JSON對象將對象序列化成JSON串，也能夠將一個合法的JSON串反序列化成一個對象，按照如下方式存儲則不會丟失存放在Storage中的對象/數組

　　

　　咱們在 localStorage.setItem(key, value) 時把須要存儲對象經過 JSON.stringify(obj) 方法序列化成JSON串，在 localStorage.getItem(key) 後使用 JSON.parse(json) 將存儲的JSON串反序列化就能夠獲得咱們存儲的對象了。

　　　　localStorage適合做爲緩存存儲不會被常常修改的數據，如組織機構樹，被緩存的數據能夠經過Chrome的開發者工具的Resources選項卡查看（如圖咱們能夠看到還能夠查看Web SQL和Cookie等等，世界真是太美好了）

　　　　

　　　　sessionStorage存儲臨時數據，會隨着窗口被關閉而消失

l  Storages VS Cookie

Storages和Cookie的區別:

1) Storages中存儲的數據不會隨着請求被提交到服務器

2) Cookie最大爲4KB，而Storages目前的形勢能夠按照5MB考慮

3) 對於Cookie咱們使用原生JavaScript沒有比較友好的讀寫方式，而對於Storages，咱們可使用Storage定義的方法輕鬆的進行讀寫

l  最後

第一次寫這樣的博客，經驗不足。若是有錯誤的地方請及時指正。十分感謝。

第一次寫博客居然緊張的把重點忘了，十分抱歉。