HTML lokal na imbakan

HTML lokal na imbakan: mas mabuti kaysa sa cookies.

Ano ang HTML lokal na imbakan?

Sa pamamagitan ng lokal na imbakan (Local Storage), ang web aplikasyon ay kayang imbakan ang datos sa lokal ng user na browser.

Bago ang HTML5, ang datos ng aplikasyon ay puwedeng imbakan lamang sa cookie, kasama ang bawat hiling ng server. Ang lokal na imbakan ay mas ligtas, at pwedeng imbakan ang malaking datos sa lokal na walang pag-aabot sa pagganap ng websayt.

Hindi katulad ng cookie, ang limitasyon ng imbakan ay mas malaki (hindi bababa sa 5MB), at ang impormasyon ay hindi inililipat sa server.

Ang lokal na imbakan ay sa pinagmulan (origin) (sa pamamagitan ng domain at protocol). Lahat ng pahina, mula sa pinagmulan, ay kayang imbakan at ma-access ang katulad na datos.

Suporta ng browser

Ang array sa talahanayan ay nagtutukoy sa unang bersyon ng browser na ganap na sumusuporta sa lokal na imbakan.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

Bagay ng HTML lokal na imbakan

Ang HTML lokal na imbakan ay nagbibigay ng dalawang bagay na mag-iimbak ng datos sa client:

  • window.localStorage - Iimbak ang datos na walang katapusan ng panahon
  • window.sessionStorage - Iimbak ang datos para sa isang session (ang datos ay mawawala kapag napapatay ang tab ng browser)

Sa paggamit ng lokal na pag-iimbak, suriin ang suporta ng browser para sa localStorage at sessionStorage:

if (typeof(Storage) !== "undefined") {
    // Code para sa localStorage/sessionStorage
} else {
    // Paumanhin! Hindi suportado ang Web Storage ..
}

Ang bagay ng localStorage

Ang localStorage na bagay ay pinanghahawakan ay walang katapusan ng panahon ng datos. Kapag ang browser ay napapatay, ang datos ay hindi na tatanggalin, at ang datos ay magiging makukuha sa susunod na araw, linggo, o taon.

实例

// I-store
localStorage.setItem("lastname", "Gates");
// Kumuha
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

亲自试一试

Pagsasalaysay ng halimbawa:

  • Lumikha ng localStorage na pangalan/saklaw ng halaga, kung saan: name="lastname", value="Gates"
  • Kumuha ng halaga ng "lastname", at i-install sa elemento na may id="result"

Maaari rin itong isulat sa ganitong paraan:

// I-store
localStorage.lastname = "Gates";
// Kumuha
document.getElementById("result").innerHTML = localStorage.lastname;

Ang syntax sa pagtanggal ng localStorage item na may pangalan "lastname":

localStorage.removeItem("lastname");

Komento: Ang pangalan/saklaw ng halaga ay pinanghahawakan bilang string. Kung kinakailangan, huwag kalimutan na balik itong ipapalit sa ibang format!

Ang halimbawa na ito ay sumusuring ng bilang ng beses na inilagay ang button ng user. Sa code, ang string na halaga ay binabalik sa numero, at ipinagpapatuloy ang pagtutuloy ng bilang:

实例

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "您已经点击这个按钮 " +
localStorage.clickcount + " 次。";

亲自试一试

sessionStorage 对象

sessionStorage 对象等同 localStorage 对象，不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页，数据也会被删除。

下例在当前 session 中对用户点击按钮进行计数：

实例

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " +
sessionStorage.clickcount + " 次。";

亲自试一试