大綱

• 認識 Web Storage
• Local Storage 及 session Storage

認識 Web Storage：Web Storage 概念
在網頁沒有 Web Storage 之前，其實就有在用戶端儲存少量資料的功能，稱之為 cookie，這兩者有些許異同之處：

• 儲存大小不同：Cooki 只允許每個網頁在 Client 端儲存 4KB 的資料，而在 HTML5 的規範裡，Web Storage 的容量是由用戶端程式 (瀏覽器) 決定，一般來說，通常是 1MB ~ 5MB 左右。
• 安全性不同：cookie 每次處理網頁的請求都會連帶傳送 cookie 值給伺服器端，使得安全性降低，Web Storage 純粹運作於用戶端，不會有這樣的問題。
• 以一組 key-value 對應保存資料：cookies 是以一組 key/value 對應的組合保存資料，而 Web Storage 也是一樣的方式。

Web Storage 提供兩個物件可以將資料存在 client 端，一種是 localStorage，另一種是 sessionStorage，兩者主要差異在於生命週期及有效範圍，請參考下表。

認識 Web Storage：偵測瀏覽器是否支援 Web storage
為了避免瀏覽器不支援 web storage 功能，我們在操作之前，最好能先偵測一下瀏覽器是否支援這項功能。語法如下：

if (typeOf(Storage) == 'undefined')
{
  alert('您的瀏覽器不支援 Web Storage')
} else {
  //localStorage 及 sessionStorage 程式碼
}

當瀏覽器不支援 Web Storage 就會跳出警告視窗，如果支援就執行 localStorage 及 sessionStorage 程式碼。

目前大多數瀏覽器都支援 Web Storage，不過需要注意的是，IE 及 Firefox 測試的時候需要把文件上傳到伺服器或 localhost 才能執行 ! 因此，建議在使用上，還是使用 google Chrome 瀏覽器。

Local Storage 及 session Storage：存取 localStorage
JavaScript 基於『同源策略 (Same-origin policy)』，限制來自相同網站的網頁才能相互叫用，localStorage API 透過 JavaScript 來操作，同樣只有來自相同來源的網頁才能取得同一個 local storage。

在 HTML5 標準，Web Storage 只允許儲存字串資料，存取方式有下列三種可供選用：

1. Storage 物件的 setItem 及 getItem 方法
2. 陣列索引
3. 屬性
   接下來來看這三種存取 localStorage 的寫法。

Storage 物件的 setItem 及 getItem 方法，儲存是使用 setItem 方法，格式如下：
window.localStorage.setItem(key, value);

例如，我們想指定一個 localStorage 變數為 userdata，並指定它的值為『Hello!HTML5』，程式碼可以這樣寫：
window.localStorage.setItem('userdate', 'Hello!HTML5');

當我們想要讀取 userdata 資料時，則使用 setItem 方法，格式如下：
window.localStorage.getItem(key);

例如：
var value1 = window.localStorage.getItem('userdata');

陣列索引，儲存語法：
window.localStorage['userdata'] = 'Hello!HTML5';

讀取語法：
var value = window.localStorage['userdata'];

屬性，儲存語法：
window.localStorage.userdata = 'Hello!HTML5';

屬性，讀取語法：
var value1 = window.localStorage.userdata;

補充說明：
上述所提到的 window，可省略不寫。