• sessionStorage 使用方法


    作为html5中Web Storage的一种存储方式,localStoragesessionStorage一样都是用来存储客户端临时信息的对象。

    W3c上给的介绍是这两者区别在于前者用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。而sessionStorage存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。个人的理解是你在打开一个页面时记录sessionStorage,当你把页面或者浏览器关闭时session中的数据即销毁。

    接下来是测试。

    先创建一个index.html,代码:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <input type="button" value="Login" onclick="submit()" />  
            <input type="text" name="text" id="text" />  
            <input type="button" value="show" onclick="show()" />  
            <a href="33.html" target="_blank">33.html</a>
    </body>

    <script>

                function submit() {  
                    var str = document.getElementById("text").value.trim();  
                    setInfo(str);  
                    document.getElementById("text").value = "";  
                }  
                //储存数据  
                function setInfo(name) {  
                    var storage = window.sessionStorage;  
                    storage.setItem('name', name);  
                }  
                //显示数据  
                function show() {  
                   var storage = window.sessionStorage;  
                   var str = "your name is " + storage.getItem("name");  
                   document.getElementById("text").value = str;  
                }  
             </script>  
    </html>

    先点击show按钮,在文本框出现的是“your name is null”,之后只需在文本框中输入数据再点击login按钮就能把数据存储到sessionStorage。如图

    现在点击show 文本框就显示“your name is xiaoming”。

    然后再创建一个33.html,代码:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>  
            var str = window.sessionStorage;  
            alert(str.getItem("name"));  
        </script>  
    </head>
    <body>
    </body>
    </html>

    最后只要点击index.html的33.html跳转到该页面就能发现sessionstorage内数据是共享的。

  • 相关阅读:
    APP 打包成功的四种方法 转自
    设置启动页
    大数据之医疗行业数据分析
    实验三(FCFS ,SJF,HRRN)
    实验四 用信号量解决进程互斥与同步问题
    实验二 (3)最短作业优先调度
    实验二 (2)优先数调度
    实验二 (1)先来先服务进程调度
    实验一
    Hdoj 1253
  • 原文地址:https://www.cnblogs.com/wangxiaomo/p/11590733.html
Copyright © 2020-2023  润新知