• HTML5之本地存储SessionStorage


    SessionStorage:
    将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是session的生命周期。session对象可以用来保存在这段时间内所要求保存的任何数据。
    此对象主要有两个方法:
    保存数据:sessionStorage.setItem(Key, value);
    读取数据:sessionStorage.getItem(Key);
    Key:表示你要存入的键名称,此名称可以随便命名,可以按照变量的意思来理解。
    Value:表示值,也就是你要存入Key中的值,可以按照变量赋值来理解。
    使用方法:
    保存数据:sessionStorage.setItem("website", "W3Cfuns.com");
    读取数据:sessionStorage.getItem("website");
    实例:
    1. <!DOCTYPE HTML> 
    2. <html> 
    3.     <head> 
    4.         <meta charset="gb2312"> 
    5.         <title>HTML5教程之本地存储SessionStorage</title> 
    6.         <script type="text/javascript"> 
    7.                 window.onload = function() 
    8.                 { 
    9.                         alert("当你关闭此页面或者关闭浏览器的时候,sessionStorage中保存的数据才会消失,也就是说重新打开此页面的时候,点击获取数据,将不会显示任何数据,刷新页面无效。 由此可以证明,sessionStorage的生命周期为,某个用户浏览网站时,从进入到离开的这段时间。") 
    10.                          
    11.                         //首先获得body中的3个input元素 
    12.                         var msg = document.getElementById("msg"); 
    13.                         var getData = document.getElementById("getData"); 
    14.                         var setData = document.getElementById("setData"); 
    15.                          
    16.                         setData.onclick = function()//存入数据 
    17.                         { 
    18.                                 if(msg.value) 
    19.                                 { 
    20.                                         sessionStorage.setItem("data", msg.value); 
    21.                                         alert("信息已保存到data字段中"); 
    22.                                 } 
    23.                                 else 
    24.                                 { 
    25.                                         alert("信息不能为空"); 
    26.                                 } 
    27.                         } 
    28.                          
    29.                         getData.onclick = function()//获取数据 
    30.                         { 
    31.                                 var msg = sessionStorage.getItem("data"); 
    32.                                 if(msg) 
    33.                                 { 
    34.                                         alert("data字段中的值为:" + msg); 
    35.                                 } 
    36.                                 else 
    37.                                 { 
    38.                                         alert("data字段无值!"); 
    39.                                 } 
    40.                         } 
    41.                 } 
    42.         </script> 
    43.     </head> 
    44.      
    45.     <body> 
    46.         <input id="msg" type="text"/> 
    47.         <input id="setData" type="button" value="保存数据"/> 
    48.         <input id="getData" type="button" value="获取数据"/> 
    49.     </body> 
    50. </html> 
  • 相关阅读:
    C# 动态创建SQL数据库(一)
    在Winform中菜单动态添加“最近使用文件”
    转(C# 类似右键菜单弹出窗体)
    为什么不能用Abort退出线程
    C# GDI绘制波形图
    转(C# 实现生产者消费者队列)
    为字段设置初始值
    闲话资源管理
    正确使用 new 修饰符
    减少装箱与拆箱
  • 原文地址:https://www.cnblogs.com/mingjixiaohui/p/5507421.html
Copyright © 2020-2023  润新知