HTML5之WEB Storage
2023-09-27 14:27:23 时间
什么是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的元素
小技巧:键值对会以字符串方式存储。记住在必要的时候将他们转为其它格式
以下的样例计算了一个用户点击按钮的次数。
在这段代码中,将会把值转化为数字,这样能够使用加法:
- 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 2D游戏编程核心技术》——第2章,第2.7节练习
- HTML5实现类似刮刮卡的功能
- HTML5与CSS3权威指南笔记案例1
- formData_html5_map标签
- 《HTML5移动Web开发实战》—— 1.2 确定网站的适用移动设备
- 《HTML5移动Web开发实战》—— 1.5 配置移动开发环境
- 《HTML5移动Web开发实战》—— 1.7 跨浏览器HTML5
- 《HTML5移动Web开发实战》—— 1.9 定义一个内容策略
- 《HTML5移动Web开发实战》—— 1.1 移动Web设计的挑战
- 《HTML5移动应用开发入门经典》—— 第1章 使用HTML5改进移动Web应用的开发
- 《HTML5+CSS3网页设计入门必读》——第1章 理解Web的工作方式1.1 HTML和WWW简史
- 《HTML5+CSS3网页设计入门必读》——1.2 创建Web内容
- 《HTML5+CSS3网页设计入门必读》——1.10 关于测试Web内容的提示
- 《HTML5 canvas开发详解(第2版)》——2.11 清除画布的方法
- 《HTML5和JavaScript Web应用开发》——导读
- 《HTML5 Canvas开发详解》——2.3 Canvas状态
- 《HTML5开发手册》——1.3 初学者“菜谱”:使用header元素建立网站标头
- 《HTML5开发手册》——1.7 中级“菜谱”:使用section元素对内容分组
- 《HTML5与CSS3实战指南》——2.4 定义页面结构
- 《响应式Web设计:HTML5和CSS3实践指南》——1.1节简介
- 《响应式Web设计:HTML5和CSS3实践指南》——2.10节基于before及after伪元素添加字符
- 《响应式Web设计:HTML5和CSS3实践指南》——2.12节为字体添加阴影效果
- 《响应式Web设计:HTML5和CSS3实践指南》——2.13节基于边框半径的圆角实现
- Html5_禁止Html5在手机上屏幕页面缩放
- 区域医疗移动医疗影像解决方案--基于HTML5的PACS--HTML5图像处理【转】
- HTML5:中国互联网的第五次腾飞?