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实现的竖形无限级导航
Dec 10 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
css3应用示例:新增的选择器
Mar 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
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
JavaScript Konami Code 实现代码
2009/07/29 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python中os操作文件及文件路径实例汇总
2015/01/15 Python
常用python编程模板汇总
2016/02/12 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
Python Requests库基本用法示例
2018/08/20 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Python 爬虫的原理
2020/07/30 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
电子信息毕业生自荐信
2013/11/16 职场文书
往来会计岗位职责
2013/12/19 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书