会话存储sessionStorage
Posted 顽燕
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了会话存储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上面的代码并在浏览器中运行可以查看到效果
以上是关于会话存储sessionStorage的主要内容，如果未能解决你的问题，请参考以下文章
js loaclstorage和sessionstorage
H5本地存储sessionStorage和localStorage的区别