RSS

2010/10/15

HTML5 storage

HTML5 的其中一個新功能是 Web Storage. 其中提供了 Local Storage 及 Session Storage 兩個新的 JavaScript object.

兩個儲存功能基本上與 Cookies 相似, 都是在本機以名+值(name & value)的方式儲存資料. Local Storage 讓同一個網站存取資料, 而 Session Storage 則只容許在同一個瀏覽視窗中的同一網站存取資料.

假設用戶同時開啟兩個視窗並瀏覽同一個網站. 利用 Local Storage 的話, 在其中一個視窗工作時儲存的資料, 可以在另一個視窗存取. 但如果利用 Session Storage 的話, 則在一個視窗的工作並不會影響到另一個視窗. 這是 Cookies 所不能做容易做到的.

不過, HTML 5 的 Web storage 與 Cookie 的最大分別, 是它並不會傳送資料到伺服器端. 這樣令到在伺服器端執行的程式無法直接存取這些資料, 不過換取回來的, 是我們可以安心的存放大量資料, 而不影響載入頁面時的資料傳送量.

使用 Local Storage (及 Session Storage) 亦非常簡單, 只需認識三個function:


localStorage.setItem(name, value);
localStorage.getItem(name);
localStorage.removeItem(name);


單看 function 名稱已經非常清楚使用方法, 想信不需要我再多解釋了.

今天測試過, 在 Win7 之下, IE8, FF3 及 Chrome 都能夠順利使用. 不過, 基於 HTML5 還未能全面普及, 要使用的話還是請小心小心.