[Back To Basic] HTML5 - Web Storage

Web Storage

目的: 將一些使用者(user)的資料暫存在瀏覽器(client-side)中(取代cookie機制)。

特性

• 將資料暫存於瀏覽器(client-side)中
• 相較於cookie更為安全
• 相較於cookie有更大的儲存空間(至少 5mb)
• 處理資料的過程不會影響網站的效能
• 儲存的資訊永遠不會回傳server
• 依照域名(Domain)和協定(Protocol)來做為儲存單位，亦即同一來源的頁面可以共享同一份資料

WebStorage類型

1. LocalStorage(window.localStorage) - 儲存"沒有"有效期限的資料
2. SessionStorage(window.sessionStorage) - 瀏覽器頁籤一關閉，資料就消失

使用前確認

請確認瀏覽器是否支援此功能，請加入以下程式碼:

if (typeof(Storage) !== "undefined") {

  // Code for localStorage/sessionStorage.

} else {

  // Web Storage support..

}

localStorage

• 存值
• localStorage.setItem("userName", "Shawn");
• localStorage.userName = "Shawn";
• 取值
• var name = localStorage.getItem("userName");
• var name = localStorage.userName;
• 清除值
• localStorage.removeItem("userName");

附註: 值都是string的型別，如果是其他型別，請記得轉型後再做邏輯處理。

sessionStorage

使用方式與localStorage類似，只有資料的生命週期不同而已

• 存值
• sessionStorage.setItem("userName", "Shawn");
• sessionStorage.userName = "Shawn";
• 取值
• var name = sessionStorage.getItem("userName");
• var name = sessionStorage.userName;
• 清除值
• sessionStorage.removeItem("userName");