Hifadhi ya hali ya HTML

Hifadhi ya hali ya HTML: Iweza kumtaarifu cookie.

Nini hifadhi ya hali ya HTML?

Kwa hifadhi ya eneo (Local Storage), programu za web inaweza kuhifadhi data katika mawasiliano ya wengi wa kiagizo kwenye kizito cha mtumishi wa mawasiliano.

Kwenye HTML5 kabla, data ya programu inaweza kuwekwa katika cookie peke yake, ikiwemo tabia za huzuni zote za serveri. Hifadhi ya eneo ni nafasi na inaweza kuhifadhi data kubwa bila kusababisha kuchangia umeme wa tovuti.

Kama cookie, hadhi za hifadhi hazina ni zaidi kubwa (ingawa inayotumiwa kwa uhesabu wa 5MB), na taarifa hayafikia serveri.

Hifadhi ya hifadhi ya eneo la kwanza (origin) (kwa eneo na taarifa). Tabia za wengi, kuanzia eneo hilo, inaweza kuhifadhi na kupata data yote iliyotumika.

浏览器支持

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

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML 本地存储对象

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

  • window.localStorage - 存储没有截止日期的数据
  • window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

在使用本地存储时，请检测 localStorage 和 sessionStorage 的浏览器支持：

if (typeof(Storage) !== "undefined") {
    // 针对 localStorage/sessionStorage 的代码
}
    // 抱歉！不支持 Web Storage ..
}

localStorage 对象

localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除，在下一天、周或年中，都是可用的。

Mfano

// 存储
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Mzuka kwa matokeo

实例解释：

  • 创建 localStorage 名称/值对，其中：name="lastname"，value="Gates"
  • 取回 "lastname" 的值，并把它插到 id="result" 的元素中

上例也可这样写：

// 存储
localStorage.lastname = "Gates";
// 取回
document.getElementById("result").innerHTML = localStorage.lastname;

删除 "lastname" localStorage 项目的语法如下：

localStorage.removeItem("lastname");

注释：名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式！

Mifano hii ni muhatili wa kwa kila mara inayotumika bila kichwa. Kwenye programu, ulimwengu wa ugaumbe unaingizwa kama thamani ya thamani, kuzingatia kuzingatia kwa uwezo wa kuzingatia:

Mfano

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

Mzuka kwa matokeo

sessionStorage 对象

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

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

Mfano

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Kwenye session hii, unapiga hili msuji kwa " +
sessionStorage.clickcount + " mara.";

Mzuka kwa matokeo