会话存储sessionStorage

会话存储的工作方式和本地存储的工作方式很接近，不同之处在于数据是各个浏览器上下文私有的，会在文档被关闭时移除（注意是被关闭时才移除，刷新是不会移除的）。我们通过全局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上面的代码并在浏览器中运行可以查看到效果