HTML5 Web 存储详解


Posted in HTML / CSS onSeptember 16, 2016

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法:

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能

对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

如何创建和访问 localStorage:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.   
  5. <script type="text/javascript">  
  6.   
  7. localStorage.lastname="Smith";   
  8. document.write("Last name: " + localStorage.lastname);   
  9.   
  10. </script>  
  11.   
  12. </body>  
  13. </html>  

下面的例子对用户访问页面的次数进行计数:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.   
  5. <script type="text/javascript">  
  6.   
  7. if (localStorage.pagecount)   
  8.     {   
  9.     localStorage.pagecount=Number(localStorage.pagecount) +1;   
  10.     }   
  11. else   
  12.     {   
  13.     localStorage.pagecount=1;   
  14.     }   
  15. document.write("Visits: " + localStorage.pagecount + " time(s).");   
  16.   
  17. </script>    
  18.   
  19. <p>刷新页面会看到计数器在增长。</p>  
  20.   
  21. <p>请关闭浏览器窗口,然后再试一次,计数器会继续计数。</p>  
  22.   
  23. </body>  
  24. </html>  

sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

如何创建并访问一个 sessionStorage:

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE HTML>   
  2. <html>   
  3. <body>   
  4.   
  5. <script type="text/javascript">   
  6.   
  7. sessionStorage.lastname="Smith";   
  8. document.write(sessionStorage.lastname);   
  9.   
  10. </script>   
  11.   
  12. </body>   
  13. </html>  

下面的例子对用户在当前 session 中访问页面的次数进行计数:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.   
  5. <script type="text/javascript">  
  6.   
  7. if (sessionStorage.pagecount)   
  8.     {   
  9.     sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;   
  10.     }   
  11. else   
  12.     {   
  13.     sessionStorage.pagecount=1;   
  14.     }   
  15. document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");   
  16.   
  17. </script>    
  18.   
  19. <p>刷新页面会看到计数器在增长。</p>  
  20.   
  21. <p>请关闭浏览器窗口,然后再试一次,计数器已经重置了。</p>  
  22.   
  23. </body>  
  24. </html>  

以上这篇HTML5 Web 存储详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 #HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 #HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 #HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 #HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 #HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 #HTML / CSS
详解HTML5表单新增属性
Dec 21 #HTML / CSS
You might like
php实现的ping端口函数实例
2014/11/12 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
Python对象的属性访问过程详解
2020/03/05 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
Spy++的使用方法及下载教程
2021/01/29 Python
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
高中数学教师求职信
2013/10/30 职场文书
应届生幼儿园求职信
2013/11/12 职场文书
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
优秀实习自我鉴定
2013/12/04 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
中秋节祝酒词
2015/08/12 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python