HTML Web Storage API
HTML Web Storage；比 Cookie 更好。
什麼是 HTML Web Storage？
藉助 Web Storage，Web 應用程式可以在使用者瀏覽器中本地儲存資料。
在 HTML5 之前，應用程式資料必須儲存在 Cookie 中，幷包含在每個伺服器請求中。Web Storage 更安全，並且可以在本地儲存大量資料，而不會影響網站效能。
與 Cookie 不同，儲存限制要大得多（至少 5MB），並且資訊永遠不會傳輸到伺服器。
Web Storage 是按源（每個域和協議）的。來自一個源的所有頁面都可以儲存和訪問相同的資料。
瀏覽器支援
表中的數字指定了完全支援 Web Storage 的第一個瀏覽器版本。
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML Web Storage 物件
HTML Web Storage 提供了兩個用於在客戶端儲存資料的物件：
window.localStorage- 儲存沒有過期日期的資料window.sessionStorage- 儲存一個會話的資料（資料在瀏覽器選項卡關閉時丟失）
在使用 Web Storage 之前，請檢查瀏覽器對 localStorage 和 sessionStorage 的支援情況：
if (typeof(Storage) !== "undefined") {
// localStorage/sessionStorage 的程式碼。
} else {
// 抱歉！不支援 Web Storage。
}
localStorage 物件
localStorage 物件儲存沒有過期日期的資料。當瀏覽器關閉時，資料不會被刪除，並且在第二天、下週或下一年仍然可用。
示例
// 儲存
localStorage.setItem("lastname", "Smith");
// 檢索
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
自己動手試一試 »
示例說明
- 建立一個名稱為 "lastname"、值為 "Smith" 的 localStorage 名稱/值對。
- 檢索 "lastname" 的值，並將其插入到 id="result" 的元素中。
上面的例子也可以這樣寫：
// 儲存
localStorage.lastname = "Smith";
// 檢索
document.getElementById("result").innerHTML = localStorage.lastname;
移除 "lastname" localStorage 項的語法如下：
localStorage.removeItem("lastname");
注意： 名稱/值對始終以字串形式儲存。需要時請記得將它們轉換為其他格式！
以下示例計算使用者點選按鈕的次數。在此程式碼中，值字串被轉換為數字，以便能夠增加計數器：
示例
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "您已點選按鈕 " +
localStorage.clickcount + " 次。";
自己動手試一試 »
sessionStorage 物件
sessionStorage 物件與 localStorage 物件相同，除了它只為一個會話儲存資料。當用戶關閉特定的瀏覽器選項卡時，資料將被刪除。
以下示例計算使用者在當前會話中點選按鈕的次數：
示例
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "您已點選按鈕 " +
sessionStorage.clickcount + " 次。";
自己動手試一試 »
