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 相关文章推荐
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 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利用curl抓取新浪微博内容示例
2014/04/27 PHP
详解php用static方法的原因
2018/09/12 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
python 数据加密代码
2008/12/24 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
新领导上任欢迎词
2014/01/13 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
自我检讨报告
2015/01/28 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
比赛主持人开场白
2015/05/29 职场文书
唐山大地震观后感
2015/06/05 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏