首页 > 代码库 > sessionStorage的用法总结

sessionStorage的用法总结

2024-07-16 07:49:14   224人阅读

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。下面是其用法:

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4   <meta charset="utf-8"> 5   <title>SessionStorage</title> 6 <script type="text/javascript"> 7     window.onload = function() 8     { 9         //首先获得body中的3个input元素10         var msg = document.getElementById("msg");//文本框要输入的内容11         var getData = document.getElementById("getData");//获取数据12         var setData = document.getElementById("setData");//保存数据13         var removeData=document.getElementById("removeData");//移除数据14         setData.onclick = function()//存入数据15         {16             if(msg.value)17             {18                     sessionStorage.setItem("data", msg.value);//把data对应的值保存到sessionStorage19                     alert("信息已保存到data字段中");20             }21             else22             {23                     alert("信息不能为空");24             }25         }26         27         getData.onclick = function()//获取数据28         {29             var msg = sessionStorage.getItem("data");30             if(msg)31             {32                     alert("data字段中的值为：" + msg);//把data对应的值弹出来33             }34             else35             {36                     alert("data字段无值！");37             }38         }39         removeData.onclick=function() //移除数据40         {41             var msg = sessionStorage.getItem("data");42             sessionStorage.removeChild(msg);43         }44     }45 </script>46 </head>47 <body>48     <input id="msg" type="text"/>49     <input id="setData" type="button" value="保存数据"/>50     <input id="getData" type="button" value="获取数据"/>51     <input id="removeData" type="button" value="移除数据"/>52 </body>53 </html>


联系
我们