HTML5本地储存

本地存储是HTML5引入的一个重要特性，它允许Web应用程序在用户浏览器中存储数据，而不需要将数据发送到服务器。与传统的cookie相比，本地存储的存储限制更大（通常为5MB），并且数据不会随每个请求发送到服务器。本地存储使用起源地（origin）来管理数据，这意味着来自同一起源地的所有页面都可以存储和访问相同的数据。

一、本地存储对象

在HTML本地存储中，可以使用两个对象来存储数据：

• window.localStorage：它用于存储没有截止日期的数据。存储在localStorage中的数据将一直存在，直到被显式删除或清除浏览器缓存。
• window.sessionStorage：它用于存储针对一个会话（session）的数据。当用户关闭浏览器标签页或浏览器窗口时，存储在sessionStorage中的数据将会丢失。

在使用本地存储之前，我们可以通过以下代码检测浏览器是否支持localStorage和sessionStorage：

if (typeof(Storage) !== "undefined") {
// 支持本地存储，可以使用localStorage和sessionStorage
} else {
// 抱歉！不支持Web Storage
}

在上述代码中，typeof(Storage)用于检测浏览器是否支持本地存储。如果支持，就可以在条件语句中编写相关代码来使用localStorage和sessionStorage进行数据存储操作；如果不支持，可以提供替代方案或向用户显示错误信息。

二、localStorage对象

localStorage对象用于存储没有截止日期的数据。即使关闭浏览器，数据也不会被删除，而且在之后的任何时间点都可以访问到这些数据。

下面是一个使用localStorage的实例：

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

• 在这个例子中，我们使用setItem方法将键值对"lastname"和"Gates"存储在localStorage中；
• 通过getItem方法我们可以取出键为"lastname"的值，并将它显示在id为"result"的HTML元素中。

这样，无论浏览器何时被关闭或重新打开，都能够通过localStorage来访问并使用存储的数据。

上面例子也可这样写：

// 存储
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）中有效。当用户关闭特定的浏览器标签页时，sessionStorage中的数据也会被删除。

以下是一个示例，用于在当前会话中对用户点击按钮进行计数：

if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "在本 session 中，已经点击这个按钮 " +
sessionStorage.clickcount + " 次。";

在这个例子中，首先检查sessionStorage中是否存在名为"clickcount"的值。如果存在，我们将其转换为数字并增加1；如果不存在，我们将其初始化为1。

然后通过getElementById方法获取id为"result"的HTML元素，并将消息显示为"在本 session 中，已经点击这个按钮 X 次"，其中X为sessionStorage中"clickcount"的值。

四、浏览器支持

下表中展示了完全支持本地储存的首个浏览器版本：