zoukankan      html  css  js  c++  java
  • Html5 web 储存

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

  • 相关阅读:
    Codeforces Round #368 (Div. 2)D. Persistent Bookcase DFS
    POJ Sudoku 数独填数 DFS
    Memory
    UESTC 771 最大容积(前缀后缀和)
    【题解】P2916 [USACO08NOV]安慰奶牛Cheering up the Cow-C++
    Prim算法与Kruskal(没有代码)
    【题解】P1396 营救-C++
    【题解】Unit Fraction Partition-C++
    【题解】P2078 朋友-C++
    【题解】P1892 [BOI2003]团伙-C++
  • 原文地址:https://www.cnblogs.com/lwyu/p/4473389.html
Copyright © 2011-2022 走看看