浏览器端存储-JZTXT

ES标准里，浏览器端保存数据，可以使用以下两种存储方式：

sessionStorage （会话存储）和 localStorage（本地存储）

这两种存储，都是以键/值对的形式存储内容。

生命周期不同（session为会话期间有效，local为永久有效），用法相同。

属性：

length：返回存储对象中包含多少条数据。
方法：
key(n)：返回存储对象中第 n 个键的名称（从0开始），即keyname。
getItem(keyname)：返回指定键的值。
setItem(keyname,value)：添加键和值，如果对应的键存在，则更新该键对应的值。
removeItem(keyname)：移除键/值对。
clear()：清除存储对象中所有的键/值对。

例：

html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <script src="js/1.js"></script>
 7     </head>
 8     <body onload="myinit()">
 9         <p id="p1"></p>
10         key:<input type="text" id="t1"/>value:<input type="text" id="t2"/><br />
11         <input type="button" value="init" onclick="f0();"/>
12         <input type="button" value="add/update" onclick="f1();"/>
13         <input type="button" value="delete" onclick="f2();"/>
14         <input type="button" value="clear" onclick="f3();"/>
15     </body>
16 </html>

 1 let myp;
 2 let myt1;
 3 let myt2;
 4 function myinit()
 5 {
 6     myp=document.querySelector("#p1");
 7     myt1=document.querySelector("#t1");
 8     myt2=document.querySelector("#t2");
 9     disp();
10 }
11 function f0()
12 {
13     localStorage.setItem("xm","zs");
14     localStorage.setItem("nl",18);
15     sessionStorage.setItem("xm","ls");
16     sessionStorage.setItem("nl",19);
17     disp();
18 }
19 function f1()
20 {
21     k1=myt1.value;
22     v1=myt2.value;
23     localStorage.setItem(k1,v1);
24     sessionStorage.setItem(k1,v1);
25     disp();
26 }
27 function f2()
28 {
29     k1=myt1.value;
30     localStorage.removeItem(k1);
31     sessionStorage.removeItem(k1);
32     disp();
33 }
34 function f3()
35 {
36     localStorage.clear();
37     sessionStorage.clear();
38     disp();
39 }
40 function disp()
41 {
42     let t="";
43     t+="localStorage:";
44     t+=dispcontent("local");
45     t+="<br />--------------------------------";
46     t+="<br />sessionStorage:";
47     t+=dispcontent("session");
48     myp.innerHTML=t;
49 }
50 function dispcontent(t)
51 {
52     let mykey;
53     let mydisp="";
54     if(t=="session")
55     {
56         for(i=0;i<sessionStorage.length;i++)
57         {
58             mykey=sessionStorage.key(i);
59             mydisp+="<br />";
60             mydisp+="key:"+mykey+",value:"+sessionStorage.getItem(mykey);
61         }
62     }
63     else if(t=="local")
64     {
65         for(i=0;i<localStorage.length;i++)
66         {
67             mykey=localStorage.key(i);
68             mydisp+="<br />";
69             mydisp+="key:"+mykey+",value:"+localStorage.getItem(mykey);
70         }
71     }
72     return mydisp;
73 }

运行效果（关闭后重新打开浏览器）

（完）