HTML 网络存储API


HTML 网络存储;比饼干更好。


什么是 HTML Web 存储?

借助 Web 存储,Web 应用程序可以在用户浏览器中本地存储数据。

在 HTML5 之前,应用程序数据必须存储在 cookie 中,并包含在每个服务器请求中。 Web存储更加安全,可以在本地存储大量数据,而不影响网站性能。

与 cookie 不同,存储限制要大得多(至少 5MB),并且信息永远不会传输到服务器。

Web 存储是按源(按域和协议)进行存储的。来自同一个来源的所有页面都可以存储和访问相同的数据。


浏览器支持

表中的数字指定第一个完全支持 Web Storage 的浏览器版本。

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML Web 存储对象

HTML Web 存储提供了两个用于在客户端存储数据的对象:

  • window.localStorage- 存储没有过期日期的数据
  • window.sessionStorage- 存储一个会话的数据(关闭浏览器选项卡时数据会丢失)

在使用 Web 存储之前,请检查浏览器对 localStorage 和 sessionStorage 的支持:

if (typeof(Storage) !== "undefined") {
  // Code for localStorage/sessionStorage.
} else {
  // Sorry! No Web Storage support..
}


本地存储对象

localStorage 对象存储没有过期日期的数据。当浏览器关闭时,数据不会被删除,并且将在第二天、一周或一年内可用。

示例

// Store
localStorage.setItem("lastname", "Smith");

// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
亲自试一试 »

示例解释:

  • 使用 name="lastname" 和 value="Smith" 创建 localStorage 名称/值对
  • 检索"lastname"的值并将其插入到id="result"的元素中

上面的例子也可以这样写:

// Store
localStorage.lastname = "Smith";
// Retrieve
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 = "You have clicked the button " +
localStorage.clickcount + " time(s).";
亲自试一试 »

会话存储对象

这个sessionStorage对象等于 localStorage 对象,除了它只存储一个会话的数据。当用户关闭特定浏览器选项卡时,数据将被删除。

以下示例计算用户在当前会话中单击按钮的次数:

示例

if (sessionStorage.clickcount) {
  sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
  sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
亲自试一试 »