最新的Web开发教程

HTML5本地存储


HTML本地存储,优于cookies


什么是HTML本地存储?

随着本地存储,Web应用程序可以在用户的​​浏览器本地存储数据。

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

不像cookies ,存储限制是大得多的(at least 5MB)和信息不会传送到服务器。

本地存储是每原点(per domain and protocol) 。 所有页面,从一个起源,可以存储和访问相同的数据。


本地和会话存储

网络存储提供了两种不同的存储区域,本地存储和会话存储,它的范围和寿命不同。

数据放置在本地存储是每原点(协议,主机名,并且如在同源策略定义的端口号的组合)(该数据可用于该预先存储的数据来自相同来源的页面加载的所有脚本)和在浏览器关闭后仍然存在。

会话存储是每原点每窗口或标签和被限制在窗口的寿命。 会话存储是为了让同一Web应用程序的不同实例在不同的窗口,没有用,这不是很好的饼干中相互支持,使用案例干扰运行。


浏览器支持

在表中的数字规定,完全支持本地存储第一个浏览器版本。

API
Web Storage 4 8 3.5 4 11.5

HTML本地存储对象

HTML本地存储提供存储在客户端上的数据的两个对象:

  • window.localStorage -没有到期日的数据存储
  • window.sessionStorage -一个会话中存储数据(当浏览器标签被关闭数据丢失)

使用本地存储之前,请检查浏览器支持localStoragesessionStorage

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="lastname"value="Smith"
  • 检索的值"lastname" ,并将其插入与ID =“结果”的元素

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

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

所述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.";
试一试»