博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Html5 web 储存
阅读量:6290 次
发布时间:2019-06-22

本文共 2081 字,大约阅读时间需要 6 分钟。

   Html5一共提供了两中在客户端储存数据的方法:

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

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

  当然,在这之前,这是都是由cookie来完成的,但是你有木有想过cookie并不适合大数据的储存,cookie由每个服务器的请求来传递数据,这使得Cookie的效率变得不高。而在HTML5中,数据不是由每个服务器传递的,而是在网站请求的时候才使用数据,这使得不影响的网站的性能下Web数据存储大数据成为可能。

  当然,对于不同的网站,数据储存于不同的区域,而且你自能访问网站自身的数据。而HTML5则是使用Javascript来储存和访问数据。好了,我们下面开始演示第一个方法,

  localStorage这种没有时间限制的数据存储方法。下面我们来创建和访问localStorage的一个实例

    <!DOCTYPE HTML>

      <html>
        <body>
          <script type="text/javascript">
              localStorage.TestName ="samll";
              document.write("Test name: " + localStorage.TestName);
          </script>
        </body>
      </html>
我们存进去一个samll的名字,然后读取出来那么这个是不是真的有效呢,当网页执行一次后,你可以删除localStorage.lastname="samll";依然有效!

下面我们来一个实际一点的列子,我们做一个用户对页面的访问次数做一个记录

  <script type="text/javascript">

    //判断用户是否对访问了这个网页

    if (localStorage.pagecount){

    localStorage.pagecount=Number(localStorage.pagecount) +1;

    }

    else{

    localStorage.pagecount=1;

    }

    document.write("访问"+ localStorage.pagecount + " 次");

  <script/>

   下面为们讲解 sessionStorage,sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。所以需要注意了!!

   我们来创建并且访问一个sessionStorage的实例,同localStorage的方法并无些许差别

     <script type="text/javascript">

      sessionStorage.sessName="Jike";
      document.write(sessionStorage.sessName);
     </script>
    镶嵌在网页上,出现Jike,关闭网页后,源码里边删除sessName,打开网页会出现undefined,说明不存在sessName,所以,要注意关闭浏览器数据被删除

    既然讲解sessionStorage和localStorage的差别,我下面再来讲sessionStorage在网页的访问次数做一个记录进行分析

    <!DOCTYPE HTML>

    <html>
    <body>
       <script type="text/javascript">

      //这里同样是判断页面是否是第一次访问

      if (sessionStorage.pagecount)
      {
        sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
      }
      else
      {
        sessionStorage.pagecount=1;
      }
        document.write("访问" + sessionStorage.pagecount + ",在 sessionStorage的情况下");
      </script>
      <p>刷新页面一次,计数器+1 </p>
      <p>请关闭浏览器窗口,然后再试一次,已经为=1。 </p>
     </body>
    </html>

  好了,HTML5提供的两种新的存储数据的方法就是上面的内容了,大家有什么好的建议可以提出了,共同学习,共同进步!西红柿_炒番茄

转载于:https://www.cnblogs.com/lwyu/p/4473389.html

你可能感兴趣的文章
Firefox 是 Pwn2own 2014 上攻陷次数最多的浏览器
查看>>
阿里感悟(十八)- 应届生Review
查看>>
话说模式匹配(5) for表达式中的模式匹配
查看>>
《锋利的SQL(第2版)》——1.7 常用函数
查看>>
jquery中hover()的用法。简单粗暴
查看>>
线程管理(六)等待线程的终结
查看>>
spring boot集成mongodb最简单版
查看>>
DELL EqualLogic PS存储数据恢复全过程整理
查看>>
《Node.js入门经典》一2.3 安装模块
查看>>
《Java 开发从入门到精通》—— 2.5 技术解惑
查看>>
Linux 性能诊断 perf使用指南
查看>>
实操分享:看看小白我如何第一次搭建阿里云windows服务器(Tomcat+Mysql)
查看>>
Sphinx 配置文件说明
查看>>
数据结构实践——顺序表应用
查看>>
python2.7 之centos7 安装 pip, Scrapy
查看>>
机智云开源框架初始化顺序
查看>>
Spark修炼之道(进阶篇)——Spark入门到精通:第五节 Spark编程模型(二)
查看>>
一线架构师实践指南:云时代下双活零切换的七大关键点
查看>>
ART世界探险(19) - 优化编译器的编译流程
查看>>
玩转Edas应用部署
查看>>