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

  • localStorage - 本地永久存储，下次打开浏览器数据依然存在
  • sessionStorage - 只存在于一个会话的数据存储，关闭浏览器数据会被清除
注意：

   1）只要清除浏览器cookie，两种存储方式的数据都会被清除

   2）对于不同的网站，数据存储于不同的区域，各网站只能访问其自身的数据

   3）浏览器之间的数据是各自独立的（比如Firefox中使用localStorage存储一组数据，在Chrome浏览器下是无法读取的）

1、目前大部分的浏览器已支持web storage, 当然也可以检测一下：

     if (!window.localStorage) {

         alert('您的浏览器不支持localStorage');

     }

     if (!window.sessionStorage) {

         alert('您的浏览器不支持sessionStorage');

     }

2、方法

localStorage，sessionStorage 有5个方法，使用方法一致，以下localStorage为例：

  • localStorage.setItem([string] key, [string] value);      //本地客户端存储一个字符串类型的数据

  • localStorage.getItem([string] key);                          //可以读取已知key值的value

  • localStorage.removeItem([string] key);                    //删除指定key的item

  • localStorage.clear();                                               //清除localstorage所有key/value键位对

  • localStorage.key([number] index);                          //得到某个索引的key

3、示例

记录进入页面次数，查看 localStorage 与 sessionStorage 存储数据的变化。

Html:

 <div>

     进入页面次数(localStorage)：<mark id="local"></mark> time(s)

     <br>

     进入页面次数(sessionStorage)：<mark id="session"></mark> time(s)

 </div>

Javascript:

 //记录localStorage进入页面次数

 var count1 = localStorage.getItem('localCount') ? parseInt(localStorage.getItem('localCount')) + 1 : 1;

 localStorage.setItem('localCount', count1);

 document.getElementById('local').innerHTML = count1;

 //记录sessionStorage进入页面次数

 var count2 = sessionStorage.getItem('sessionCount') ? parseInt(sessionStorage.getItem('sessionCount')) + 1 : 1;

 sessionStorage.setItem('sessionCount', count2);

 document.getElementById('session').innerHTML = count2;

step1：进入chrome刷新页面10次

step2：关闭chrome再重新打开

说明：关闭页面后，sessionStorage 的值丢失

step3：第一次进入firefox

说明：浏览器之间的数据是各自独立的，firefox 读取不到 chrome的客户端存储数据

step4：清空chrome的cookie

说明：清空cookie，localStorage 与 sessionStorage 的数据均被清除

源代码：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>在客户端存储数据</title>

 </head>

 <body>

 <div>

     进入页面次数(localStorage)：<mark id="local"></mark> time(s)

     <br>

     进入页面次数(sessionStorage)：<mark id="session"></mark> time(s)

 </div>

  <script>

      if (window.localStorage) { //sessionStorage

          //记录localStorage进入页面次数

          var count1 = localStorage.getItem('localCount') ? parseInt(localStorage.getItem('localCount')) + 1 : 1;

          localStorage.setItem('localCount', count1);

          document.getElementById('local').innerHTML = count1;

          //记录sessionStorage进入页面次数

          var count2 = sessionStorage.getItem('sessionCount') ? parseInt(sessionStorage.getItem('sessionCount')) + 1 : 1;

          sessionStorage.setItem('sessionCount', count2);

          document.getElementById('session').innerHTML = count2;

      }

  </script>

 </body>

 </html>

HTML5 本地存储（Web Storage）的更多相关文章

  1. HTML5 本地存储Web Storage简单了解

    ​HTML5本地存储规范,定义了两个重要的API :Web Storage  和  本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机 ...

  2. HTML5本地存储 Web Storage

    Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数 ...

  3. html5本地存储web storage的简单使用

    html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比 ...

  4. HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  5. [转]HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  6. HTML5本地存储(Local Storage) 的前世今生

    长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...

  7. HTML5本地存储——Web SQL Database与indexedDB

    虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...

  8. 本地存储 web storage

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. html5本地存储 local storage

    HTML5 web storage, a better local storage than cookies. With HTML5, web pages can store data locally ...

  10. HTML5本地存储——IndexedDB（一：基本使用）

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

随机推荐

  1. 24 - 面向对象基础-多继承-super-mro-Mixin

    目录 1 类的继承 2 不同版本的类 3 基本概念 4 特殊属性和方法 5 继承中的访问控制 6 方法的重写(override) 6.1 super 6.2 继承中的初始化 7 多继承 7.1 多继承 ...

  2. C++学习之路（十）：虚继承引入的执行效率

    这篇文章不知道取啥名字了,暂且这样叫,直接看场景就明白了.节选自<深度探索C++对象模型> Point3d origin, *pt = &origin; (1)origin.x = ...

  3. SSL handshake failed: SSL error: Key usage violation in certificate has been detected.

    sudo apt-get install libneon27-dev cd /usr/libsudo mv libneon-gnutls.so.27 libneon-gnutls.so.27.olds ...

  4. openjudge-NOI 2.6-1768 最大子矩阵

    题目链接:http://noi.openjudge.cn/ch0206/1768/ 题解: 如果用O(n4)的算法肯定会炸,需要压缩掉一维的空间,只需要简单加和就好啦 例如,我们要对样例中第2-4行D ...

  5. ansible command模块将返回值写入变量

    ansible 中command模块支持 register参数将远程命令执行的输出结果存储在变量中,后续可以在when中对该变量进行检索确定下一步任务. --- - name: cat /etc/re ...

  6. Spring之IOC，DI，动态代理，反射

    Spring框架是J2EE开发中一个使用广泛的框架,它使得dao和service层的维护更加便利.Spring框架有两个重要的特征,一个是IOC,另一个是AOP.我们在这里主要介绍IOC,以及IOC中 ...

  7. asp基础

    0.1在浏览器中通过查看源代码的方式是无法看到 ASP 源代码的,你只能看到由 ASP 文件输出的结果,而那些只是纯粹的 HTML 而已.这是因为,在结果被送回浏览器前,脚本已经在服务器上执行了. 0 ...

  8. HDU 2102 A计划（BFS）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2102 题目大意:公主被关在一个两层的迷宫里,迷宫的入口是S(0,0,0),公主的位置用P表示,时空传输 ...

  9. 常用的scrapy setting

    原文请参考    Scrapy 爬虫入门教程十三 Settings(设置), 讲的很详细 官网参考  Settings 设置 Scrapy 设置允许您自定义所有 Scrapy 组件的行为,包括核心,扩 ...

  10. jquery on方法（事件委托）

    jquery绑定事件处理函数的方法有好几个,比如:bind(),on(),delegate(),live(). 其中delegate和live都是用on实现的,效果也类似,live好像在1.7版本中已 ...