HTML5 Web 存储详解

下面小编就为大家带来一篇html5 web 存储详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦

在客户端存储数据

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

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

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

立即学习“前端免费学习笔记(深入)”;

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

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

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

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

localStorage 方法

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

如何创建和访问 localStorage:

XML/HTML Code复制内容到剪贴板

nbsp;HTML>localStorage.lastname="Smith";   document.write("Last name: " + localStorage.lastname);   

登录后复制

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

XML/HTML Code复制内容到剪贴板

nbsp;HTML>if (localStorage.pagecount)       {       localStorage.pagecount=Number(localStorage.pagecount) +1;       }   else       {       localStorage.pagecount=1;       }   document.write("Visits: " + localStorage.pagecount + " time(s).");   

刷新页面会看到计数器在增长。

请关闭浏览器窗口,然后再试一次,计数器会继续计数。

登录后复制

sessionStorage 方法

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

如何创建并访问一个 sessionStorage:

JavaScript Code复制内容到剪贴板

nbsp;HTML>            sessionStorage.lastname="Smith";   document.write(sessionStorage.lastname);         

登录后复制

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

XML/HTML Code复制内容到剪贴板

nbsp;HTML>if (sessionStorage.pagecount)       {       sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;       }   else       {       sessionStorage.pagecount=1;       }   document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");   

刷新页面会看到计数器在增长。

请关闭浏览器窗口,然后再试一次,计数器已经重置了。

登录后复制

以上就是HTML5 Web 存储详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2912277.html

(0)
上一篇 2025年3月11日 05:07:04
下一篇 2025年3月11日 05:07:13

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • HTML5对手机页面长按会粘贴复制禁用的解决方法

    这篇文章主要介绍了html5对手机页面长按会粘贴复制禁用的解决方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 解决方法如下所示:  直接在CSS 文件中添加下面的代码,就可以实现了在手机端禁止粘贴复制的功能: XML/HT…

    编程技术 2025年3月11日
    000
  • 生日蛋糕的制作方法-不过用的是HTML5+CSS3代码

    “祝你生日快乐,祝你生日快乐……”,过生日有生日歌,生日蛋糕也是必不可少的,这篇文章主要为大家详细介绍了程序员利用纯html5+css3制作的生日蛋糕,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 以一个前端开发的身份绘制一个简单的蛋糕…

    2025年3月11日
    200
  • HTML5地理定位与第三方工具百度地图的应用

    这篇文章主要为大家详细介绍了html5地理定位与第三方工具百度地图的应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 前言:看到了很多技术大牛和相关博客,很少关于HTML5的地理定位的描述,不知道他们是不愿意提及还是使用的少的原因,我…

    2025年3月11日 编程技术
    200
  • 详解HTML5通讯录获取指定多个人的信息

    这篇文章主要介绍了详解html5+通讯录获取指定多个人的信息 ,非常具有实用价值,需要的朋友可以参考下。 本文介绍了HTML5通讯录获取指定多个人的信息,具体如下: 一、获取多个人的信息:要解决通讯录导入多个人的信息之前,要解决获取多个人的…

    编程技术 2025年3月11日
    200
  • H5 Canvas API中drawImage(图像进行缩放或裁剪)的使用实例

    这篇文章主要介绍了html5 canvas api中drawimage()方法的使用实例,drawimage()方法主要用来对图像进行缩放或裁剪,文中给出了其坐标及相关参数的用法,需要的朋友可以参考下 drawImage()是一个很关键的方…

    2025年3月11日
    200
  • 为什么现在HTML5的优势越来越大

    html5的优势绝不仅仅止于炫酷页面等等,h5有更大的用户市场,尤其是它跨屏、跨平台的各种优势,为企业的移动化转型打开了全新思路。html5技术的三大优势如下: 从开发成本层面来说,开发一个HTML5移动站点要比开发一个原生APP的成本低出…

    编程技术 2025年3月11日
    200
  • H5中indexedDB 数据库的使用方法详解

    本篇文章主要介绍了html5中indexeddb 数据库的使用实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 前言 在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在…

    编程技术 2025年3月11日
    200
  • HTML5实现微信播放全屏的方法详解

    在ios和安卓手机里的微信下播放视频时,会遇到不少问题,例如需要手动点击,视频才会播放,并且视频会跳出微信框,出现控制条,如果视频不是腾讯视频,播放完毕会出现腾讯视频的广告推送等问题,如何解决呢,下面通过本文给大家分享下html5微信播放全…

    编程技术 2025年3月11日
    200
  • H5制作虚拟键盘时出现输入框遮挡的情况怎么办?

    本文主要介绍了html5 虚拟键盘出现挡住输入框的解决办法。具有很好的参考价值,下面跟着小编一起来看下吧 话不多说,请看代码: //防止键盘把当前输入框给挡住$$(‘input[type=”text”],textarea’).on(‘cli…

    编程技术 2025年3月11日
    200
  • H5与传统html的区别

    这篇文章主要介绍了html5学习笔记之html5与传统html区别 的相关资料,需要的朋友可以参考下 一. html5语法的改变 该知识点所说变化指的是基于html4基础上所定义的改变,主要有如下: 1.html5的文件扩展符(.html或…

    编程技术 2025年3月11日
    200

发表回复

登录后才能评论