zoukankan      html  css  js  c++  java
  • sessionStorage的用法总结

    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>
  • 相关阅读:
    bzoj1660[Usaco2006 Nov]Bad Hair Day 乱发节*
    bzoj1624[Usaco2008 Open] Clear And Present Danger 寻宝之路*
    bzoj1617[Usaco2008 Mar]River Crossing渡河问题*
    bzoj1681[Usaco2005 Mar]Checking an Alibi 不在场的证明*
    bzoj1631[Usaco2007 Feb]Cow Party*
    bzoj1854[Scoi2010]游戏
    bzoj2338[HNOI2011]数矩形
    bzoj1096[ZJOI2007]仓库建设
    继承原理、派生重用
    面向对象三大特性——继承(含派生)
  • 原文地址:https://www.cnblogs.com/liubeimeng/p/3897687.html
Copyright © 2011-2022 走看看