（24）HTML5-窗体切换

最新推荐文章于 2023-08-25 13:32:54 发布

梧桐下的四叶草

最新推荐文章于 2023-08-25 13:32:54 发布

阅读量613

点赞数

分类专栏： HTML5 文章标签： html5 javascript

本文链接：https://blog.csdn.net/zsc2014030403015/article/details/52431883

版权

HTML5 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

介绍完localStorage和sessionStoage后，基本上已经掌握了两者使用的精髓，如果还是不够清楚的话也没有关系，在这个章节的例子中，将会直接把两种存储方式设计在同一个程序中，我们就逐一地来比较在各个状态下的数据保留形式。

首先在画面里设计两个字段，一个字段的数据会以“localStorag”方式存储，一个字段会以“sessionStorage”方式存储。在两个字段中分别键入数据后，按下“save”按钮，将数据分别存入两种Storage中。此时按下“F5”重新刷新网页，发现这两个字段的数据不会消失，代表已经被存储。

再来单击“OpenWin”按钮，通过window。open（url）指令启动窗口，或是开一个新分页直接将网址复制过去，我们发现两个字段中的数据仍然保留着。但是在新分页中重新执行例子，sessionStorage的数据就会被清除，这证明这二者生命周期的差异。

<html>
 <head>
     <meta charset="utf-8"/>
     <style>
     </style>
     <script >
        function loadStorage(){
            document.getElementById("local").value=window.localStorage["local"];
            document.getElementById("session").value=window.sessionStorage["session"];
        }
        function saveToStorage(){
            window.localStorage["local"]=document.getElementById("local").value;
            window.sessionStorage["session"]=document.getElementById("session").value;
        }
        function openWindow(url){
            window.open(url);
        }
     </script>
 </head>
 <body οnlοad="loadStorage()">
    local Storg<input type="text" id="local"/><br/>
    session Storge<input type="text" id="session"/><br/>
    <input type="button" value="Save" οnclick="saveToStorage()">
    <input type="button" value="OpenWin" οnclick="openWindow('js.html')">    
 </body>
</html>