HTML5 Web 存储 (Web Storage)


HTML5 web 存储,一个比cookie更好的本地存储方式


什么是 HTML5 Web 存储(Web Storage)?

通过Web Storage,Web应用程序可以在用户的浏览器中存储数据.

在HTML5之前,本地存储使用的是 cookie.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.

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

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


浏览器支持

表中的数字指定了完全支持Web存储的浏览器版本.

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") {
    // 支持 localStorage sessionStorage 对象.
} else {
    // 抱歉! 不支持 web 存储..
}


localStorage 对象

localStorage对象存储没有过期日期的数据.当浏览器关闭时,存储数据不会被删除,第二天、第二周或下一年之后,存储数据依然可用.

实例

// 存储
localStorage.setItem("name", "新手教程-UIHTML");
// 取值
document.getElementById("result").innerHTML = localStorage.getItem("name");
运行 »

示例说明:

  • 使用name =“name”和value =“新手教程-UIHTML”创建localStorage名称/值对
  • 检索“name”的值并将其插入到id =“result”的元素中

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

// 存储
localStorage.name = "新手教程-UIHTML";
// 取值
document.getElementById("result").innerHTML = localStorage.name;

删除“name”localStorage项的语法如下:

localStorage.removeItem("name");

注意: 键/值 对始终存储为字符串.请记住在需要时将它们转换为其他格式类型!

以下示例计算用户单击按钮的次数.在此代码中,值字符串将转换为一个数字,以便能够增加计数器:

实例

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "你点击了按钮 " +
localStorage.clickcount + "次.";
运行 »

sessionStorage 对象

sessionStorage对象等于localStorage对象, 只是它只存储一个会话的数据.当用户关闭浏览器窗口后,数据会被删除.

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

实例

if (sessionStorage.clickcount) {
   sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "在这个会话中你已经点击了该按钮 " +
sessionStorage.clickcount + " 次.";
运行 »