web storage的用法

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>

 

posted @ 2021-01-09 15:10  每天进步多一点  阅读(414)  评论(0)  编辑  收藏  举报