H5 客户端存储（Web Storage）

Posted 豆芽的生长空间

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5 客户端存储（Web Storage）相关的知识，希望对你有一定的参考价值。

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

  • localStorage - 本地永久存储，下次打开浏览器数据依然存在
  • sessionStorage - 只存在于一个会话的数据存储，关闭浏览器数据会被清除
注意：
   1）只要清除浏览器cookie，两种存储方式的数据都会被清除
   2）对于不同的网站，数据存储于不同的区域，各网站只能访问其自身的数据
   3）浏览器之间的数据是各自独立的（比如Firefox中使用localStorage存储一组数据，在Chrome浏览器下是无法读取的）

 

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

1     if (!window.localStorage) {
2         alert(\'您的浏览器不支持localStorage\');
3     }
4 
5     if (!window.sessionStorage) {
6         alert(\'您的浏览器不支持sessionStorage\');
7     }

 

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:    

1 <div>
2     进入页面次数(localStorage)：<mark id="local"></mark> time(s)
3     <br>
4     进入页面次数(sessionStorage)：<mark id="session"></mark> time(s)
5 </div>

 

    Javascript:

1 //记录localStorage进入页面次数
2 var count1 = localStorage.getItem(\'localCount\') ? parseInt(localStorage.getItem(\'localCount\')) + 1 : 1;
3 localStorage.setItem(\'localCount\', count1);
4 document.getElementById(\'local\').innerHTML = count1;
5 
6 //记录sessionStorage进入页面次数
7 var count2 = sessionStorage.getItem(\'sessionCount\') ? parseInt(sessionStorage.getItem(\'sessionCount\')) + 1 : 1;
8 sessionStorage.setItem(\'sessionCount\', count2);
9 document.getElementById(\'session\').innerHTML = count2;

 

 step1：进入chrome刷新页面10次

  

 step2：关闭chrome再重新打开

 

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

 

 step3：第一次进入firefox

  

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


 step4：清空chrome的cookie

   

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

 

 源代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>在客户端存储数据</title>
 6 </head>
 7 <body>
 8 <div>
 9     进入页面次数(localStorage)：<mark id="local"></mark> time(s)
10     <br>
11     进入页面次数(sessionStorage)：<mark id="session"></mark> time(s)
12 </div>
13  <script>
14      if (window.localStorage) { //sessionStorage
15          //记录localStorage进入页面次数
16          var count1 = localStorage.getItem(\'localCount\') ? parseInt(localStorage.getItem(\'localCount\')) + 1 : 1;
17          localStorage.setItem(\'localCount\', count1);
18          document.getElementById(\'local\').innerHTML = count1;
19 
20          //记录sessionStorage进入页面次数
21          var count2 = sessionStorage.getItem(\'sessionCount\') ? parseInt(sessionStorage.getItem(\'sessionCount\')) + 1 : 1;
22          sessionStorage.setItem(\'sessionCount\', count2);
23          document.getElementById(\'session\').innerHTML = count2;
24      }
25  </script>
26 </body>
27 </html>
View Code

 

以上是关于H5 客户端存储（Web Storage）的主要内容，如果未能解决你的问题，请参考以下文章

H5本地储存Web Storage

解析H5本地储存Web Storage

H5 基于Web Storage 的客户端留言板

H5的storage(sessionstorage&localStorage)简单存储删除

H5本地存储二

Web Storage