标签：switch tab 刷新 工作方式 html span type var add
会话存储的工作方式和本地存储的工作方式很接近，不同之处在于数据是各个浏览器上下文私有的，会在文档被关闭时移除（注意是被关闭时才移除，刷新是不会移除的）。我们通过全局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上面的代码并在浏览器中运行可以查看到效果
标签：switch tab 刷新 工作方式 html span type var add
原文地址：http://www.cnblogs.com/wuqun/p/6373942.html
