会话存储的工作方式和本地存储的工作方式很接近，不同之处在于数据是各个浏览器上下文私有的，会在文档被关闭时移除（注意是被关闭时才移除，刷新是不会移除的）。我们通过全局sessionStorage访问会话存储，它返回一个Storage对象，该对象与本地存储里的是一样的。
sessionStorage案例1：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>sessionStorage</title>
6 <style>
7
8 </style>
9 </head>
10
11 <body>
12 <ul>
13 <li>key:<input id="key" type="text" value=""></li>
14 <li>value:<input id="value" type="text" value=""></li>
15 <li>
16 <input id="add" type="button" value="add">
17 <input id="clear" type="button" value="clear">
18 </li>
19 <li id="countmsg">There are <span id="count"></span> items</li>
20 </ul>
21 <table id="data"></table>
22 <script>
23 displayData();
24 document.getElementById(‘add‘).onclick=handleButtonPress;
25 document.getElementById(‘clear‘).onclick=handleButtonPress;
26 function handleButtonPress(e){
27 switch(e.target.id){
28 case ‘add‘:
29 var key=document.getElementById(‘key‘).value;
30 var value=document.getElementById(‘value‘).value;
31 sessionStorage.setItem(key,value);
32 break;
33 case ‘clear‘:
34 sessionStorage.clear();
35 }
36 displayData();
37 }
38 function displayData(){
39 var tableItem=document.getElementById(‘data‘);
40 tableItem.innerHTML=‘‘;
41 var itemCount=sessionStorage.length;
42 document.getElementById(‘count‘).innerHTML=itemCount;
43 for(var i=0;i<itemCount;i++){
44 var key=sessionStorage.key(i);
45 var val=sessionStorage[key];
46 tableItem.innerHTML+=‘<tr><th>‘+key+‘</th><td>‘+val+‘</td></tr>‘;
47 }
48 }
49 </script>
50 </body>
51 </html>
这个案例的工作方式和本地存储里的案例很接近，不同之处在与可见性和寿命受到限制（sessionStorage是临时存储）。这些限制会影响storage事件的处理方式，本地存储里提到storage事件只会在其他同源文档中触发。对于会话存储，这就意味着事件只会在内嵌文档中触发，比如iframe文档，如下案例:
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>sessionStorage</title>
6 <style>
7
8 </style>
9 </head>
10
11 <body>
12 <ul>
13 <li>key:<input id="key" type="text" value=""></li>
14 <li>value:<input id="value" type="text" value=""></li>
15 <li>
16 <input id="add" type="button" value="add">
17 <input id="clear" type="button" value="clear">
18 </li>
19 <li id="countmsg">There are <span id="count"></span> items</li>
20 </ul>
21 <table id="data"></table>
22 <iframe src="./storage.html" width="500" height="175"></iframe>
23 <script>
24 displayData();
25 document.getElementById(‘add‘).onclick=handleButtonPress;
26 document.getElementById(‘clear‘).onclick=handleButtonPress;
27 function handleButtonPress(e){
28 switch(e.target.id){
29 case ‘add‘:
30 var key=document.getElementById(‘key‘).value;
31 var value=document.getElementById(‘value‘).value;
32 sessionStorage.setItem(key,value);
33 break;
34 case ‘clear‘:
35 sessionStorage.clear();
36 }
37 displayData();
38 }
39 function displayData(){
40 var tableItem=document.getElementById(‘data‘);
41 tableItem.innerHTML=‘‘;
42 var itemCount=sessionStorage.length;
43 document.getElementById(‘count‘).innerHTML=itemCount;
44 for(var i=0;i<itemCount;i++){
45 var key=sessionStorage.key(i);
46 var val=sessionStorage[key];
47 tableItem.innerHTML+=‘<tr><th>‘+key+‘</th><td>‘+val+‘</td></tr>‘;
48 }
49 }
50 </script>
51 </body>
52 </html>
此案例中iframe引入的storage.html与本地存储那里的storage.html代码一模一样，此处就不做说明。直接copy上面的代码并在浏览器中运行可以查看到效果
时间： 2024-11-05 18:28:12