HTML5 WEB存储

HTML的本地存储；比cookie更好。

HTML的本地存储是什么?

使用本地存储，Web应用程序可以在用户浏览器中本地存储数据.

在HTML5之前, 应用程序数据必须存储在cookie中, 包含在每个服务器请求中.

本地存储是更安全的，大量的数据可以存储在本地，而不会影响网站的性能.

不像cookies, 存储限制的更大（至少5MB）并且信息从来不传送到服务器.

本地存储是每个源（每个域和协议）. 所有页面，从一个原点，可以存储和访问相同的数据.

浏览器支持

表中的数字指定第一个完全支持本地存储的浏览器版本.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML的本地存储对象

HTML 本地存储提供了两个对象为客户端存储数据:

  • window.localStorage - 存储没有时间限制的数据
  • window.sessionStorage - 存储一个会话的数据（当浏览器选项卡关闭时数据丢失）

在使用本地存储之前，检查浏览器是否支持 localStorage 和 sessionStorage:

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

localStorage 对象

localStorage 对象存储没有时间限制的数据. 当浏览器关闭时，数据将不会被删除，将在第二天、一周或一年中使用.

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

让我试试

实例解析:

  • 创建一个localStorage name/value 对 使用 name="lastname" 和 value="Smith"
  • 检索"lastname"的值，并且使用id="result"插入它到元素里面

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

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

删除localStorage中的"lastname"项，写法如下:

localStorage.removeItem("lastname");

注意: Name/value对总是存储为字符串. 记住在需要时将它们转换为另一种格式!

下面的示例计算用户单击按钮的次数。在这个代码中，值字符串被转换为一个数字，以便能够增加计数器:

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 对象

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.";

让我试试