Programming Design Notes

各位應該都知道現在 HTML5 被 Google 和 Apple 2 家大公司大力推行，並希望取代 Flash 的位置，但 HTML5 有什麼特別?

以前要記錄一個用戶的資料，並希望用戶下一次打開瀏覽器時候資料仍然存在，你可以想像成網站登入系統，將用戶資料記到 Cookie 內，你可能會問: 有了 Cookie 為什麼還要 Web Storage?

Web Storage 的好處:

• 比 Cookie 儲存量大。因應不同瀏覽器會有所不同，不過一定比 Cookie 大。
• 在 Javascript 操作 Web Storage 比操作 Cookie 的 API 簡單。
• 比 Cookie 節省頻寬，因為 Web Storage 不會上傳到伺服器上。

Web Storage 的壞處:

• 只有 2 種 Web Storage，一種是永久儲存 的 localStorage，另一種是會話儲存 的 sessionStorage，會話儲存模式會在關閉瀏覽器時刪除。不像 Cookie 有一個時間性。
• 安全性和 Cookie 差不多，因為同樣是儲存在用戶電腦上，有機會被別人拆解出來。

不同瀏覽器的支援亦有所不同，建議使用 Chrome 瀏覽器來看這篇文章。使用其他瀏覽器可能看不到某些效果。

Web Storage 怎麼儲存東西? 首先你要用一個 Key 去作為資料的唯一識別，拿取資料時靠同一個 Key 去取回之前記錄的資料，就好似 Java 的 HashMap 一樣。

先講解一下 localStorage。
你可以試試在以下的 Textfield 輸入一些文字，然後關閉瀏覽器後再次打開此頁面，剛才的文字又會出現在 Textfield 內。

localStorage:

程式碼:

var key = "localValue";
var localTextField = document.getElementById("local");

var value = window.localStorage.getItem(key);
if (value){
    localTextField.value = value;
}

localTextField.addEventListener('keyup', function(){
    window.localStorage.setItem(key, localTextField.value);
}, false);

其實控制 localStorage 只需一行的程式碼便可以，第 4 行程式碼是將之前儲存的數值拿出來並放到 value object 內，而第 10 行，只需要使用 setItem 並將 Key 和數值一起儲存便可以。實在非常簡單，比控制 Cookie 簡單得多了。

以下的是 sessionStorage 的例子:
你可以試試在以下的 Textfield 輸入一些文字，然後重新整理此頁面，剛才的文字又會出現在 Textfield 內。但一關閉瀏覽器就不會再出現文字。

sessionStorage:

程式碼:

var key = "sessionValue";
var sessionTextField = document.getElementById("session");

var value = window.sessionStorage.getItem(key);
if (value) {
    sessionTextField.value = value;
}

sessionTextField.addEventListener('keyup', function(){
    window.sessionStorage.setItem(key, sessionTextField.value);
}, false);

控制 sessionStorage 和 localStorage 一樣簡單，但我發覺 localStorage 和 sessionStorage 可以將 DOM Object 儲存起來，但拿出來再使用時就會發生錯誤，JSON Object則沒有此問題。

localStorage 和 sessionStorage 一樣有以下的 function 和 attribute:

• length - 記錄現在有多少個 object 儲存在 localStorage 或 sessionStorage
• key(index) - 返回 index 所在位置的 key
• getItem(key) - 返回該 key 擁有的資料，不一定是 String，可以是一個 Object
• setItem(key, data) - 將資料放到 localStorage 或 sessionStorage 中
• removeItem(key) - 移除該 key 擁有的 object
• clear() - 清空整個 localStorage

你可以將 localStorage 和 sessionStorage 當成一個 JSON Object。用以下的方法也可以將資料記錄 localStorage 和 sessionStorage 中。

簡易存入資料的方法:

localStorage.xyz = 'xyz';
sessionStorage.abc = 'abc';

localStorage['xyz'] = 'xyz';
sessionStorage.['abc'] = 'abc';

總結一下 Web Storage 的功能:

存入資料:

window.localStorage.setItem('xyz', 'xyz');
window.sessionStorage.setItem('xyz', 'xyz');

window.localStorage.xyz = 'xyz';
window.sessionStorage.abc = 'abc';

window.localStorage['xyz'] = 'xyz';
window.sessionStorage.['abc'] = 'abc';

拿取資料:

var xyz = window.localStorage.getItem('xyz');
var abc = window.sessionStorage.getItem('abc');

var xyz = window.localStorage.xyz;
var abc = window.sessionStorage.abc;

var xyz = window.localStorage['xyz'];
var abc = window.sessionStorage.abc;

移除資料:

window.localStorage.removeItem('xyz');
window.sessionStorage.removeItem('abc');

delete window.localStorage.xyz;
delete window.sessionStorage.abc;

delete window.localStorage['xyz'];
delete window.sessionStorage['abc'];

移除整個 Web Storage 的資料:

window.localStorage.clear();
window.sessionStorage.clear();

拿取 Web Storage 的資料總數:

var size = window.localStorage.length;
var size = window.sessionStorage.length;

拿取某一行資料的 Key:

var key = window.localStorage.key(1);
var key = window.sessionStorage.key(1);

相關書籍: