HTML5本地存儲 Web Storage

Web Storage基本介紹

　　HTML5 定義了本地存儲規範 Web Storage ， 提供了兩種存儲類型 API  sessionStorage 和 localStorage，兩者的差別主要是數據的保存時長及數據的共享方式。

　　　　localStorage 一直存儲在本地，數據存儲是永久的，除非用戶或程序對其進行刪除操做；

　　　　sessionStorage在會話期內有效，數據在瀏覽器關閉後自動刪除；

　　　　localStorage是基於域的，任何在該域內的頁面均可以訪問， sessionStorage在保存它的窗口，和由當前窗口建立的新窗口有效，直到相關聯的標籤頁關閉；　

　　Web Storage實際上是HTML4 中 cookies存儲機制的一個改進版本，可是兩種機制的功能又不相同：

　　　　cookie在瀏覽器和服務器間來回傳遞， sessionStorage和localStorage不會；

　　　　sessionStorage和localStorage的存儲空間更大，有更多豐富易用的接口，各自獨立的存儲空間；

　　請注意以上區別，前端面試中，只要問到 html5 相關 基本就這些。

瀏覽器的支持狀況

　　目前全部主流的瀏覽器都在必定程度上支持 HTML5 的 Web Storage特性。 由下圖能夠看出，基本上全部現代瀏覽器都已經支持 Web Storage。

　　

　　移動瀏覽器的狀況更爲樂觀

　　Android平臺和 IOS 平臺各自的瀏覽器都基本上支持 Web Storage 本地存儲特性。 目前市場上的移動設備， 除了 android 手機和 iphone 手機外，愈來愈多的平板電腦面世，並且基本上依賴着兩種平臺。在移動端使用 Web Storage 咱們幾乎不須要考慮瀏覽器是否支持， 固然從代碼的嚴謹來講，建議最好在使用前先檢查瀏覽器是否支持

if (window.localStorage) {
    // 瀏覽器支持 localStorage
}

if (window.sessionStorage) {
    // 瀏覽器支持 sessionStorage
}

Web Storage API

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter creator void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

　　所謂DOMString： 一個UTF-16字符串，JavaScript正是使用了這種編碼的字符串,因此DOMString就等同是JavaScript中的String.

　　每一個存儲對象提供一個 key/value ( 鍵/值 ) 對列表， 被稱爲數據項。 key 能夠是任意的字符串( 包括空字符串 )，value 也能夠是任意的字符串。

　　規範定義的接口提供了: 

　　localStorage.length                          一個只讀的 length屬性。 能夠知道 localStorage 中存儲着多少條數據

　　localStorage.setItem(key, val)          存儲一條數據

　　localStorage.getItem(key)                經過 key 獲取該條數據

　　localStorage.removeItem(key)          刪除一條數據 

　　localStorage.clear()                         清空全部 key/value 鍵值對 items

      

　　Storage 只能存儲key/value對，並且只支持字符串類型的數據， setItem() 方法傳入的值都會自動轉化爲 string 類型。複合數據類型（Array Object）轉化結果同 toString 方法。

 　　若是你想保存其它類型的數據，在保存的時候須要轉化成字符串，在讀取時，再轉化回來；

　　使用 localStorage 存儲和讀取 JSON 格式數據：

// 定義JSON格式字符串
var userData = {
    name: "zichen",
    age: "24",
    sex: "男",
    adress: "杭州"
}

// 存儲 userData 數據
localStorage.setItem("userData", JSON.stringify(userData));

// 讀取 userData 數據並賦值給變量
var newUserData = JSON.parse(localStorage.getItem("userData"));

console.log(newUserData);

// 刪除 userData 
localStorage.removeItem("userData");

　　sessionStorage 瀏覽器支持狀況同 localStorage ， 屬性和方法及使用方式也和 localStorage一致。

Storage 事件監聽

　　對 Storage 進行存取操做的同時，若是需進行監聽，可使用 HTML5 Web Storage API內置的事件監聽器對數據進行監控， Storage中的數據有任何變更，Storage監聽器都能捕獲，接口定義：

interface StorageEvent : Event {
  readonly attribute DOMString key;
  readonly attribute DOMString? oldValue;
  readonly attribute DOMString? newValue;
  readonly attribute DOMString url;
  readonly attribute Storage? storageArea;
};

　　key 表示屬性中的鍵名。

　　oldValue 更新前的鍵值。

     newValue 數據更新後的鍵值。

　　url 記錄 Storage 事件發生時的源地址。

　　StorageArea 指向事件監聽對應的 Storage對象

　　

　　使用 w3c 標準事件註冊方法 addEventListener 進行註冊監聽：

window.addEventListener(「storage」,
    function(e) {
        console.log(e)
    },
    true);