HTML lokal na imbakan

HTML lokal na imbakan: mas mahusay kaysa sa cookies.

Ano ang HTML lokal na imbakan?

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

Bago ang HTML5, ang datos ng aplikasyon ay kayang imbakan lamang sa cookie, kasama ang bawat kahilingan ng server. Ang lokal na imbakan ay mas ligtas, at maaaring imbakin ang malaking datos sa lokal na walang pagkakasakit sa pagganap ng websayt.

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

Ang lokal na imbakan ay sa pinagmulang lugar (origin) (sa pamamagitan ng domain at protocol). Ang lahat ng pahina, mula sa pinagmulang lugar, ay kayang imbakan at aksesin 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 storage.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

Ang HTML lokal na storage na object

Ang HTML lokal na storage ay nagbibigay ng dalawang object na magagamit sa pag-store ng datos sa client-side:

  • window.localStorage - I-store ang datos na walang huling petsa
  • window.sessionStorage - I-store ang datos para sa isang session (ang datos ay mawawala kapag nagsasara ang tab ng browser)

Sa paggamit ng lokal na storage, suriin ang suporta ng browser sa localStorage at sessionStorage:

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

Ang localStorage na bagay

Ang localStorage na bagay ay inilagay ang walang huling petsa ng datos. Kapag nagsasara ang browser, ang datos ay hindi na inaalis, at magiging magagamit pa rin 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 ang halaga ng "lastname", at ilagay ito sa elemento na may id="result"

Ang halimbawa sa itaas ay maaari ring gayon gawin:

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

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

localStorage.removeItem("lastname");

Komento: Ang pangalan/saklaw ng halaga ay palaging inilagay bilang string. Kung kinakailangan, huwag kalimutan na palitan sila sa ibang format!

Ang halimbawa na ito ay sumusuring ng bilang ng beses na pinindot ng user ang button. Sa code, ang string na halaga ay nababalik sa numero, at ang pagtatalaga ng bilang ay nagpapatuloy:

实例

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 + " 次。";

亲自试一试