码迷,mamicode.com
首页 > 其他好文 > 详细

sessionStorage的用法总结

时间:2014-08-07 18:44:21      阅读:838      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   java   io   数据   ar   cti   

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对应的值保存到sessionStorage
19                     alert("信息已保存到data字段中");
20             }
21             else
22             {
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             else
35             {
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>

sessionStorage的用法总结,布布扣,bubuko.com

sessionStorage的用法总结

标签:style   blog   color   java   io   数据   ar   cti   

原文地址:http://www.cnblogs.com/liubeimeng/p/3897687.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!