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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
jquery 插件开发备注
2010/08/27 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
一分钟理解js闭包
2016/05/04 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
python next()和iter()函数原理解析
2020/02/07 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
校庆活动方案
2014/03/31 职场文书
银行转正自我鉴定
2014/09/29 职场文书
团员年度个人总结
2015/02/26 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书