會話存儲的工作方式和本地存儲的工作方式很接近，不同之處在於數據是各個瀏覽器上下文私有的，會在文檔被關閉時移除（注意是被關閉時才移除，刷新是不會移除的）。我們通過全局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上面的代碼並在瀏覽器中運行可以查看到效果