Hifadhi ya Kijani ya HTML

Hifadhi ya Kijani ya HTML: inapata mafanikio kuliko cookie.

Nini Hifadhi ya Kijani ya HTML?

Kwa Hifadhi ya Kijani (Local Storage), programu ya web inaweza kuhifadhi data katika hifadhi ya kijani kwenye mifumo wa kiburia wa mtumishi.

Kabla ya HTML5, data ya programu inaweza kuwahifadhiwa katika cookie peke yake, ikiwemo mawendo yote ya mtaalamu. Hifadhi ya kijani inaonesha ukubwa na inaweza kuwahifadhi data kubwa katika hifadhi binafsi bila kumwangamiza umeme wa tovuti.

Kama cookie, hifadhi inahatarishwa zaidi (kwa ujumbe 5MB), na habari haikapikwa kwenye mtaalamu.

Hifadhi cha kuzalika (origin) (kwa eneo na muundo). Tabia zote, kutoka kwa kuzalika, inaweza kuhifadhi na kupata data zilizohifadhiwa.

浏览器支持

表格中的数组指示了完全支持本地存储的首个浏览器版本。

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML 本地存储对象

HTML 本地存储提供了两个在客户端存储数据的对象：

  • window.localStorage - Ili kuwasiliana na data inayotumika kwa muda wote
  • window.sessionStorage - Ili kuwasiliana na data kwa muda wa kinaingia (kama inafungua kinaingia inadumu, data itakuwa inatukia)

Kama inahitajika kwenye kusafirisha kwa kinaingia, tafadhali tukabidhi kumtumia kinaingia na kinaingia ya muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa mudo

if (typeof(Storage) !== "undefined") {
    // Kwa mawasiliano ya localStorage/sessionStorage
} else {
    // Mababu! Hakuwa na matumizi ya Web Storage ..
}

Inaonesha kwamba kinaingia ya localStorage

Inaonesha kwamba kinaingia ya localStorage hufaa data inayotumika kwa muda wote. Hivyo, data haiharibiwa kama kinaingia kinaonesha inafungua, kwa sababu hii inawekwa kwa sababu ya muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa muda wa mudo

实例

// Kuwasafirisha
localStorage.setItem("lastname", "Gates");
// Kuwafikia
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

亲自试一试

Muhtasari wa mifano:

  • Kujenga kinaingia kwa maadili ya mawakilishi, ambapo name="lastname", value="Gates"
  • Kuwaona thamani ya "lastname", na kuwasiliana kwa kinaingia kama id="result"

Mifano hii inaweza kuandikwa kama:

// Kuwasafirisha
localStorage.lastname = "Gates";
// Kuwafikia
document.getElementById("result").innerHTML = localStorage.lastname;

Inasababisha kufungua uamuzi wa kufaikia kinaingia kama "lastname" localStorage kama iliyotiririka:

localStorage.removeItem("lastname");

Kweli: Kufaa heshima kwamba kinaingia zaidi ya mawazo yanahifadhiwa kama matukio. Kama inahitajika, tafadhali zingatumiwa kusafiriwa kwa muundo mwingine!

Mifano hii inaonyesha kwa kuhesabu kwa mara ya kichukua mibuto. Inaathiriwa tena kwa uhesabu, kwa sababu inasafirishwa tena kwa sababu ya adui:

实例

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

亲自试一试