Web存储 -- Storage

2019-11-13 10:46:18 by冲冲

1、概念

早期的本地/浏览器的存储使用cookie。

当前的本地/浏览器的存储使用Storage。

2、浏览器支持

InternetExplorer7及更早IE版本不支持Storage。

IE8+, Firefox, Opera, Chrome, Safari已经支持Storage。

使用storage之前，应该检查浏览器是否支持Storage。

1 if(typeof(Storage)!=="undefined")
2 {
3     // 支持localStorage和sessionStorage对象
4     // 业务代码.....
5 } else {
6     // 不支持web存储
7 }

3、Storage分类

客户端/浏览器存储数据的两个Storage对象

① localStorage - 用于长期保存整个网站的数据，数据的存储时间没有限制，直到手动去除。

② sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

4、API

localStorage和sessionStorage使用的API相同，常用的有（以localStorage为例）

① 保存数据：localStorage.setItem(key,value);

② 读取数据：localStorage.getItem(key);

③ 删除单个数据：localStorage.removeItem(key);

④ 删除所有数据：localStorage.clear();

⑤ 得到某个索引的key：localStorage.key(index);

1 // 存储
2 localStorage.sitename = "菜鸟教程";
3 // 查找
4 document.getElementById("result").innerHTML = localStorage.sitename;
5 // 移除
6 localStorage.removeItem("sitename");

5、数据类型

键/值对通常以字符串存储，可以按需要转换数据类型。

 1 // 该实例展示用户点击按钮的次数，期望将代码中的字符串值转换为数字类型
 2 if (localStorage.clickcount)
 3 {
 4     localStorage.clickcount=Number(localStorage.clickcount)+1;
 5 }
 6 else
 7 {
 8     localStorage.clickcount=1;
 9 }
10 document.getElementById("result").innerHTML=" 你已经点击按钮 " + localStorage.clickcount + " 次 ";

6、sessionStorage

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

1 if (sessionStorage.clickcount)
2 {
3     sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
4 }
5 else
6 {
7     sessionStorage.clickcount=1;
8 }
9 document.getElementById("result").innerHTML="在这个会话中你已经点击该按钮 " + sessionStorage.clickcount + " 次 ";

7、应用实例

 1 <!DOCTYPE html>
 2 <html>  
 3 <head>  
 4     <meta charset="utf-8">  
 5     <title>HTML5本地存储之WebStorage</title>  
 6 </head>  
 7 <body>  
 8     <div style="border: 2px dashed #ccc;width:320px;text-align:left;">
 9         <label for="keyname">别名(key):</label>  
10         <input type="text" id="keyname" name="keyname" class="text"/>  
11         <br/>  
12         <label for="sitename">网站名：</label>  
13         <input type="text" id="sitename" name="sitename" class="text"/>  
14         <br/>  
15         <label for="siteurl">网 址：</label>  
16         <input type="text" id="siteurl" name="siteurl"/>  
17         <br/>  
18         <input type="button" onclick="save()" value="新增记录"/>  
19         <hr/>  
20         <label for="search_phone">输入别名(key)：</label>  
21         <input type="text" id="search_site" name="search_site"/>  
22         <input type="button" onclick="find()" value="查找网站"/>  
23         <p id="find_result"><br/></p>  
24     </div>  
25     <br/>  
26     <div id="list">  
27     </div>  
28     <script>
29     //保存数据  
30     function save(){  
31         var site = new Object;
32         site.keyname = document.getElementById("keyname").value;
33         site.sitename = document.getElementById("sitename").value;  
34         site.siteurl = document.getElementById("siteurl").value;
35         var str = JSON.stringify(site); // 将对象转换为字符串
36         localStorage.setItem(site.keyname,str);  
37         alert("保存成功");
38     }  
39     //查找数据  
40     function find(){  
41         var search_site = document.getElementById("search_site").value;  
42         var str = localStorage.getItem(search_site);  
43         var find_result = document.getElementById("find_result");
44         var site = JSON.parse(str);  
45         find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;  
46     }  
47     
48     //将所有存储在localStorage中的对象提取出来，并展现到界面上
49     //确保存储的 keyname 对应的值为转换对象，否则JSON.parse会报错
50     function loadAll(){  
51         var list = document.getElementById("list");  
52         if(localStorage.length>0){  
53             var result = "<table border='1'>";  
54             result += "<tr><td>别名</td><td>网站名</td><td>网址</td></tr>";  
55             for(var i=0;i<localStorage.length;i++){ 
56                 var keyname = localStorage.key(i);  
57                 var str = localStorage.getItem(keyname);  
58                 var site = JSON.parse(str);  
59                 result += "<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>";  
60             }  
61             result += "</table>";  
62             list.innerHTML = result;  
63         }else{  
64             list.innerHTML = "数据为空...";  
65         }  
66     }  
67     </script>
68 </body>  
69 </html>

8、Storage作用域

作用域：隔离开不同页面之间的Storage（比如，在百度的页面上不能读到腾讯的localStorage）

① localStorage -- 只要在相同的协议、相同的主机名、相同的端口（同一个网站）下，就能读取/修改到同一份localStorage数据。

② sessionStorage -- 比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

【HTML5】Web存储 -- Storage