HTML5之WEB Storage
2017-06-07 09:10
323 查看
什么是HTML5 web storage?
使用HTML5,web页面能够使用用户的浏览器本地保存数据。在曾经,通常我们使用cookie来保存用户数据。然而使用web存储更加安全和高速。
数据不再包括在每个server请求中,仅仅存在你须要的时候。同一时候我们也能够保存大量数据,而不影响站点的性能。
数据都保存成key/value形式,一个web页面仅仅能够訪问自己的数据。
浏览器支持
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的元素
小技巧:键值对会以字符串方式存储。记住在必要的时候将他们转为其它格式
以下的样例计算了一个用户点击button的次数。
在这段代码中,将会把值转化为数字。这样能够使用加法:
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.";
相关文章推荐
- HTML5本地储存--利用storage事件实时监听Web Storage
- HTML5本地存储之Web Storage
- HTML5 Web Storage(读书笔记)
- HTML5 Web Storage
- html5本地存储web storage
- HTML5 Web存储(Web Storage)技术及用法
- html5中的Web Storage特性:sessionStorage和localStorage
- HTML5新功能之一《web Storage 本地存储》
- HTML5 Web Storage
- Html5的Web Storage的基础
- html5 web storage
- html5之web storage
- html5 web storage
- html5本地存储(web Storage)
- HTML5 Web存储(Web Storage)(3)
- 【HTML5与CSS3基础】HTML5本地存储 Web Storage
- HTML5 | Web Storage
- (五)HTML5本地存储——Web Storage
- HTML5开发 web storage
- HTML5 web存储—web storage