HTML kaiyuka na yankin

HTML kaiyuka na yankin: kaiyuka da kowa da kowa.

Kuwa ne ko HTML kaiyuka na yankin?

Da kaiyuka na yankin kaiyuka (Local Storage), yanar gizo na web za'a iya gudanar da data a yankin kaiyuka na kwanan wata.

Kafin HTML5, data na aplikishon za'a iya gudanar da shi ne a cookie, kuma duk kwanan wata na server. Alkawarancin kaiyuka yana da iya kowa da kowa, kuma za'a iya gudanar da nau'in data na yau'a a yankin kaiyuka da ba za'a ya kai tsaya kwarin yanar gizo.

Duba kuma cookie, kowa da ke kowa a yankin da ake gudanar da shi yana da kyau da kashi 5MB, kuma yau'a da ba a tsara shi zuwa server.

Alkawarancin kaiyuka ba zai al'ummin (origin) (tashin domaini da protokol). dukwannin iyaka, daga al'ummin, za'a iya kowa da gudanar da nau'in da yake da shi.

浏览器支持

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

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 的代码
} else {
    // 抱歉！不支持 Web Storage ..
}

localStorage 对象

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

实例

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

亲自试一试

实例解释：

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

上例也可这样写：

// 存储
localStorage.lastname = "Gates";
// 取回
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 = "您已经点击这个按钮 " +
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 + " 次。";

亲自试一试