WebStorage API 簡介

詳細的規格可以參考 W3C 上的規格文件。而且不用懷疑,這個 IE8 有支援!

HTML5 中有一個 WebStorage API 的規格,它定義 user agent(client,也就是瀏覽器)提供一個可以儲存資料的機制,並且分為 sessionStorage 以及 localStorage 兩種儲存體。在支援 WebStorage API 規格的瀏覽器下,開發者便能使用 JavaScript 來操作這個 API,將資料(以字串儲存,正確地說是 DOMString)暫存在 user agent 端,以供之後存取使用。

WebStorage API 的使用

WebStorage API 的使用方式非常簡單,它是以 key-value 的型式來儲存資料的。以 localStorage 為例,它的存取方式可以是:
[code lang="javascript"]....
// 操作 counter 範例
var key = 'counter';
var counter = localStorage.getItem(key);
if (counter == null) {
counter = 0;
} else {
counter = parseInt(counter) + 1;
}
localStroage.setItem(key, counter);
[/code]
或是:
[code lang="javascript"]....
// 操作 counter 範例
var counter = localStorage.counter;
if (counter === undefined) {
counter = 0;
} else {
counter = parseInt(counter) + 1;
}
localStroage.counter = counter;
[/code]

在使用上有幾點注意事項:

  • 若要檢查瀏覽器是否支援這個 API,可以檢查 window.localStoragewindow.sessionStorage 是否為 undefined
  • 如果使用 getItem/setItem 的方式,當 getItem 而資料不存在時是傳回 null;如果用物件存取的方式,則是傳回 undefined
  • storage 裡的資料會以字串的方式儲存,所以像此例中需要數字運算時就要注意(字串 + 1 是字串後面再接一個 1)。
  • 雖然可以用物件存取的方式來取得資料,但是不能像一般 JavaScript object 那樣可以用 [key] 的方式存取,如果 key 是字串的話就用 getItem/setItem 的方式存取。
  • 移除資料可以使用 localStorage.removeItem(key) 或是 localStorage.clear() 來操作

localStorage 與 sessionStorage 的差異

在 WebStorage API 的規格書裡定義了 user agent 可實作 localStoragesessionStorage 兩種不同的 storage。其實差別很簡單,儲存在localStorage 的資料會永久(permanently)存在(除非使用者清除瀏覽器資料或是程式去 removeItemclear;而 sessionStorage 的資料只能存活僅在視窗(或 tab)被關閉之前(refresh 並不會清掉),而且即便是同個 domain 但不同視窗是不會互相影響的(cookie 或 localStorage 就會有影響)。

不過 Firefox 有自己做一個 globalStorage,它的效果比較像 localStorage,不過就可以用 object 或 index 存取 member。詳情可參考 https://developer.mozilla.org/en/DOM/Storage。

目前號稱支援 WebStorage API 的瀏覽器有:

  1. Safari 4/Firefox3 預設就支援了 localStorage 以及 sessionStorage,但 Firefox 在無法設定 cookie 或 cookie 被關閉的狀態下(如:用 file:/// 存取檔案)則無法使用 sessionStorage
  2. Chrome/Chromium 4.x 目前預設只開啟 localStroage 的支援,而啟動時加上 --enable-session-storage 參數才會打開 sessionStorage 的支援。
  3. IE8 支援,而且有別於其它瀏覽器預設只能存 5MB 資料(Firefox 可以去 about:config 裡修改 dom.storage.default_quota 的值),IE8 可以儲存 10MB 的資料。

使用的限制及風險

WebStorage API 儲存的資料除了有上述的容量限制之外,每一個 storage 是綁定 domain name 的,所以雖然不同網站的 storage 不會互相影響,但如果在相同 domain 下就無可避免了。另外,也因為是綁定 domain name,如果 DNS 被汙染了也是很危險的說....

另外要比較小心的地方就是,不同瀏覽器在處理 WebStorage 的方式不同,也要小心內容被其它 application 存取的風險。

(其實風險都跟 cookie 很類似)

觀察或 debug

除了在開發者工具的 console 下可以直接看 localStorage 或是 sessionStorage 之外,Safari/Chrome 的開發者工具就有一個 tab 能夠直接看 Storage 的內容:

結論

WebStorage API 應該是 HTML5 中很廣受支援的規格(連 IE8 都支援了!),有機會的話可以好好利用一下 😀