【HTML5】Web存儲 -- Storage

時間 2019-11-18

標籤 HTML5 web 存儲 storage 欄目 HTML5 简体版

原文原文鏈接

Web存儲 -- Storage

2019-11-13 10:46:18 by沖沖html

一、概念

早期的本地/瀏覽器的存儲使用cookie。web

當前的本地/瀏覽器的存儲使用Storage。瀏覽器

二、瀏覽器支持

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

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

使用storage以前，應該檢查瀏覽器是否支持Storage。網站

1 if(typeof(Storage)!=="undefined")
2 {
3     // 支持localStorage和sessionStorage對象
4     // 業務代碼.....
5 } else {
6     // 不支持web存儲
7 }

三、Storage分類

客戶端/瀏覽器存儲數據的兩個Storage對象url

① localStorage - 用於長期保存整個網站的數據，數據的存儲時間沒有限制，直到手動去除。spa

② sessionStorage - 用於臨時保存同一窗口(或標籤頁)的數據，在關閉窗口或標籤頁以後將會刪除這些數據。code

四、API

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

① 保存數據：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");

五、數據類型

鍵/值對一般以字符串存儲，能夠按須要轉換數據類型。

 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 + " 次 ";

六、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 + " 次 ";

七、應用實例

 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>