web storage的用法
阿新 • • 發佈：2021-01-09
Web Storage分為兩種：
- sessionStorage
- localStorage
從字面意思就可以很清楚的看出來，sessionStorage將資料儲存在session中，瀏覽器關閉也就沒了；而localStorage則一直將資料儲存在客戶端本地；
這樣做的好處是快取資料和減少記憶體的佔用；
不管是sessionStorage，還是localStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：
- 儲存資料：localStorage.setItem(key,value);
- 讀取資料：localStorage.getItem(key);
- 刪除單個數據：localStorage.removeItem(key);
- 刪除所有資料：localStorage.clear();
- 得到某個索引的key：localStorage.key(index);
如上，key和value都必須為字串，換言之，web Storage的API只能操作字串。
這樣做的好處有：
1. 快取資料
2. 減少對記憶體的佔用.
對於localStorage的操作
1.將物件存入到localStorage
1 <script type="text/javascript"> 2 var obj = { name:'Jim' }; 3 var str = JSON.stringify(obj); 4 //存入5 localStorage.obj = str; 6 </script>
2.從localStorage讀取資料
1 <script type="text/javascript"> 2 var obj = { name:'Jim' }; 3 var str = JSON.stringify(obj); 4 //存入 5 localStorage.obj = str; 6 //讀取 7 str = localStorage.obj; 8 document.write(str); 9 //重新轉換為物件10 obj = JSON.parse(str); 11 </script>
3.例子
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Example</title> 5 <style> 6 body > * { 7 float: left; 8 } 9 10 table { 11 border-collapse: collapse; 12 margin-left: 50px; 13 } 14 15 th, td { 16 padding: 4px; 17 } 18 19 th { 20 text-align: right; 21 } 22 23 input { 24 border: thin solid black; 25 padding: 2px; 26 } 27 28 label { 29 min-width: 50px; 30 display: inline-block; 31 text-align: right; 32 } 33 34 #countmsg, #buttons { 35 margin-left: 50px; 36 margin-top: 5px; 37 margin-bottom: 5px; 38 } 39 </style> 40 </head> 41 <body> 42 <div> 43 <div> 44 <label>Key:</label><input id="key" placeholder="Enter Key" /> 45 </div> 46 <div> 47 <label>Value:</label><input id="value" placeholder="Enter Value" /> 48 </div> 49 <div id="buttons"> 50 <button id="add">Add</button> 51 <button id="clear">Clear</button> 52 </div> 53 <p id="countmsg">There are <span id="count"></span>items</p> 54 </div> 55 <table id="data" border="1"> 56 <tr> 57 <th>Item Count:</th> 58 <td id="count">-</td> 59 </tr> 60 </table> 61 <script> 62 displayData(); 63 var buttons = document.getElementsByTagName("button"); 64 for (var i = 0; i < buttons.length; i++) { 65 buttons[i].onclick = handleButtonPress; 66 } 67 function handleButtonPress(e) { 68 switch (e.target.id) { 69 case 'add': 70 var key = document.getElementById("key").value; 71 var value = document.getElementById("value").value; 72 sessionStorage.setItem(key, value); 73 break; 74 case 'clear': 75 sessionStorage.clear(); 76 break; 77 } 78 displayData(); 79 } 80 function displayData() { 81 var tableElement = document.getElementById('data'); 82 tableElement.innerHTML = ''; 83 var itemCount = sessionStorage.length; 84 document.getElementById('count').innerHTML = itemCount; 85 for (var i = 0; i < itemCount; i++) { 86 var key = sessionStorage.key(i); 87 var val = sessionStorage.getItem(key); 88 tableElement.innerHTML += "<tr><th>" + key + ":</th><td>" + val + "</td></tr>"; 89 } 90 } 91 </script> 92 </body> 93 </html>