HTML5 网络存储 (Web Storage)
HTML5 web storage是比cookie存储更好的存储方式.
什么是HTML5 web storage?
在HTML5中, 网页可以将数据存储在本地浏览器中.
以前，是使用cookies进行处理的.然而，web storage更安全和快速. 数据不包括在每个服务器请求中，只在获取时使用. 还可以存储大量的数据,而不会影响网站的性能.
数据使用键值对的形式存储，每个网页只能获取自己存储的数据.
不像cookies,存储限制要大的多（至少5M），并且信息不会传到服务器.
浏览器支持
Web Storage 支持IE8+, 火狐, 欧朋, 谷歌和苹果浏览器.
注意: IE7以及更早版本的浏览器, 不支持Web Storage.
HTML5 Web Storage对象
HTML5 Web Storage 在客户端提供了2个新对象用于存储数据:
- window.localStorage - 存储数据不过期
- code.sessionStorage - 为一个对话存储数据(当页签关闭时数据会消失)
在使用web storage之前, 检测浏览器是否支持localStorage和sessionStorage:
{
// localStorage/sessionStorage对应的逻辑代码
}
else
{
// 对不起！不支持web storage..
}
localStorage对象
localStorage对象存储数据没有过期时间. 当浏览器关闭时数据不会被删除.
例子
localStorage.setItem("lastname", "Woo");
// 取回
document.getElementById("result").innerHTML=localStorage.getItem("lastname");
亲自试一试 »
例子说明:
- 创建一个localStorage对象，键值对形式name="lastname" 和值="Woo"
- 获取"lastname"的值并且将其插入到id="result"的元素中
上面的例子也可以这么写:
localStorage.lastname = "Woo";
// 获取
document.getElementById("result").innerHTML=localStorage.lastname;
使用下面的方法删除localStorage中"lastname"
注意: Name/value总是作为字符串进行存储. 当需要的时候记得转换他们的格式!
下面的例子统计用户点击按键的次数.代码中将字符串转换成数字类型后进行增长计数:
例子
{
localStorage.clickcount = Number(localStorage.clickcount) + 1;
}
else
{
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML="你已经点击了 " +
localStorage.clickcount + " 次.";
亲自试一试 »
sessionStorage对象
sessionStorage对象和localStorage对象基本一样, 除了 它只保存在当前会话中. 当用户关闭浏览器或页签时数据会被删除.
以下例子统计了用户点击按钮的次数,使用的是当前会话:
例子
{
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else
{
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML="在这个会话中,你已经点击了 " +
sessionStorage.clickcount + " 次.";
亲自试一试 »
