首页风格
门户
博客

GBin1专题之HTML5教程 - 第十一篇:HTML5 web存储(Web Storage)

日期:2012-4-24  来源:GBin1.com

什么是HTML5 web storage?

使用HTML5,web页面可以使用用户的浏览器本地保存数据。

在以前,通常我们使用cookie来保存用户数据。然而使用web存储更加安全和快速。数据不再包含在每一个服务器请求中,只存在你需要的时候。同时我们也可以保存大量数据,而不影响网站的性能。

数据都保存成key/value形式,一个web页面只可以访问自己的数据。

浏览器支持

iefirefoxchromeoperasafari

IE8+,Firefox,Chrome,Opera和Safari 5都支持这个特性。

注意IE7和更早版本不支持这个特性。

localStorage和sessionStorage

这里有俩个新的用来保存数据的属性:

  • localStorage - 没有过期时间的方式保存数据 
  • sessionStorage - 保存数据到session

在使用web storage之前,检查浏览器是否支持localStorage和sessionStorage:

if(typeof(Storage)!=="undefined"){
  // Yes! localStorage and sessionStorage support!
  // Some code.....
}else{
  // Sorry! No web storage support..
}

localStorage Object

localStorage对象保存数据没有过期时间的问题。数据在浏览器关闭后不会删除,而且一直有效。

localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;

在线演示

代码说明:

  • 创建了一个localStorage 键值对,使用key="lastname", value="Smith" 。
  • 得到lastname对应的值,并且赋予id=result的元素

小技巧:键值对会以字符串方式存储。记住在必要的时候将他们转为其他格式

下面的例子计算了一个用户点击按钮的次数。在这段代码中,将会把值转化为数字,这样可以使用加法:

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对象类似,除了保存的数据只在当前session中有效。数据将会在用户关闭浏览器窗口时失效。

下面代码在当前的session中计算了用户点击的次数:

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

在线演示 

来源:GBin1专题之HTML5教程 - 第十一篇:HTML5 web存储(Web Storage)

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐