最新的Web開發教程

HTML5本地存儲


HTML本地存儲,優於cookies


什麼是HTML本地存儲?

隨著本地存儲,Web應用程序可以在用戶的瀏覽器本地存儲數據。

HTML5之前,應用程序數據必須存儲在cookies ,包含在每一個服務器的請求。 本地存儲更安全,以及大量的數據可以在本地存儲,而不會影響網站的性能。

不像cookies ,存儲限制是大得多的(at least 5MB)和信息不會傳送到服務器。

本地存儲是每原點(per domain and protocol) 。 所有頁面,從一個起源,可以存儲和訪問相同的數據。


本地和會話存儲

網絡存儲提供了兩種不同的存儲區域,本地存儲和會話存儲,它的範圍和壽命不同。

數據放置在本地存儲是每原點(協議,主機名,並且如在同源策略定義的端口號的組合)(該數據可用於該預先存儲的數據來自相同來源的頁面加載的所有腳本)和在瀏覽器關閉後仍然存在。

會話存儲是每原點每窗口或標籤和被限制在窗口的壽命。 會話存儲是為了讓同一Web應用程序的不同實例在不同的窗口,沒有用,這不是很好的餅乾中相互支持,使用案例干擾運行。


瀏覽器支持

在表中的數字規定,完全支持本地存儲第一個瀏覽器版本。

API
Web Storage 4 8 3.5 4 11.5

HTML本地存儲對象

HTML本地存儲提供存儲在客戶端上的數據的兩個對象:

  • window.localStorage -沒有到期日的數據存儲
  • window.sessionStorage -一個會話中存儲數據(當瀏覽器標籤被關閉數據丟失)

使用本地存儲之前,請檢查瀏覽器支持localStoragesessionStorage

if(typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

在localStorage的對象

的localStorage的對象存儲與沒有到期日的數據。 當瀏覽器關閉時,數據不會被刪除,並將於接下來的一天,一周,還是一年。

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
試一試»

為例進行了說明:

  • 創建一個localStorage名稱/值對用name="lastname"value="Smith"
  • 檢索的值"lastname" ,並將其插入與ID =“結果”的元素

上面的例子也可以寫成這樣:

// Store
localStorage.lastname = "Smith";
// Retrieve
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 = "You have clicked the button " +
localStorage.clickcount + " time(s).";
試一試»

sessionStorage對象

所述sessionStorage對象等於localStorage對象, 不同之處在於它存儲的數據只有一個會話。 當用戶關閉瀏覽器特定選項卡中的數據被刪除。

下面的例子計算時代用戶點擊一個按鈕,在當前會話數:

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
試一試»