在页面跳转之间实现sessionStorage

Implementing sessionStorage in between page hops

本文关键字：之间 实现 sessionStorage      更新时间：2023-09-26

我有两个代码，一个是form.html:

<!DOCTYPE html>
<html>
<head>
    <script src="D:'frameworks'jquery-1.11.3.js"></script>
    <meta charset="ISO-8859-1">
    <title>Form</title>
    <script type="text/javascript">
        $(function(){
            $("#sub").on("click", function(){
                sessionStorage.n1 = $("#no1").val();
                sessionStorage.n2 = $("#no2").val();
                location.href = "main.html";
            });
        });
    </script>
</head>
<body>
    No1:<input type="text" id="no1">
    No2:<input type="text" id="no2">
    <br>
    <input type="button" value="Submit" id="sub"> 
</body>
</html>
另一个是main.html: 
<!DOCTYPE html>
<html>
<head>
    <script src="D:'frameworks'jquery-1.11.3.js"></script>
    <meta charset="ISO-8859-1">
    <title>Main</title>
    <script type="text/javascript">
        var n1_arr = new Array();
        var n2_arr = new Array();
        $(function(){
            n1_arr.push(sessionStorage.getItem("n1"));
            n2_arr.push(sessionStorage.getItem("n2"));
            $("#a").click(function(){
                location.href = "form.html";
            });
            $("#s").click(function(){
                for(var i = 0; i < n1_arr.length; i++)
                {
                    alert(n1_arr[i] + " and " + n2_arr[i]);
                }
            });
        });
    </script>
</head>
<body>
<input type="button" value="Add" id="a">
<input type="button" value="Show" id="s">
</body>
</html>

我希望这些像这样工作:首先，main.html将打开，点击"添加"按钮，form.html将在同一个浏览器选项卡中打开。用户将在id为no1和no2的文本框中输入两个数字。然后用户将点击"提交"，然后再次打开main.html(再次在同一浏览器选项卡中)。只要用户愿意，他就会继续这样做。点击"Show"按钮，用户输入的所有值将分别成对发出警报。我怎样才能做到这一点呢?在本例中，只通知最后输入的对。

首先你必须在控制台上运行命令:

sessionStorage.clear ();

main.html 

<!DOCTYPE html>
<html>
<head>
 <script src="D:'frameworks'jquery-1.11.3.js"></script>
<meta charset="ISO-8859-1">
<title>Main</title>
<script type="text/javascript">
    var n1_arr = JSON.parse(sessionStorage.getItem("n1")) || [];
    var n2_arr = JSON.parse(sessionStorage.getItem("n2")) || [];
    $(function(){

        $("#a").click(function(){
            location.href = "form.html";
        });

        $("#s").click(function(){
            for(var i = 0; i < n1_arr.length; i++)
            {
                alert(n1_arr[i] + " and " + n2_arr[i]);
            }
        });
    });
</script>
</head>
<body>
<input type="button" value="Add" id="a"> 
<input type="button" value="Show" id="s"> 
</body>
</html>

form.html 

<!DOCTYPE html>
<html>
<head>
 <script src="D:'frameworks'jquery-1.11.3.js"></script>
<meta charset="ISO-8859-1">
<title>Form</title>
<script type="text/javascript">
    $(function(){
        $("#sub").on("click", function(){
            var n1 = sessionStorage.n1 || [];
            if(n1.length > 0){
                n1 = JSON.parse(sessionStorage.n1);
            }
            n1.push($("#no1").val());
            sessionStorage.n1 = JSON.stringify(n1);
            var n2 = sessionStorage.n2 || [];
            if(n2.length > 0){
                n2 = JSON.parse(sessionStorage.n2);
            }
            n2.push($("#no2").val());
            sessionStorage.n2 = JSON.stringify(n2);
            location.href = "main.html";
        });
    });
</script>
</head>
<body>
 No1:<input type="text" id="no1">
No2:<input type="text" id="no2">
<br>
<input type="button" value="Submit" id="sub"> 
 </body>
  </html>

显示您正在覆盖现有的n1和n2值。

sessionStorage存储键值对，值为字符串。当您执行sessionStorage.setItem('n1', 'test')时，它将覆盖现有值。

你需要做的是读取现有的值(它将是一个字符串)，解析它，在末尾附加你的新值，然后将整个对象插入到存储中。当存储对象时，最好先将其stringify为JSON。

如果你需要存储复杂的对象，如数组等，你可能会发现使用indexedDB更好。

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStoragehttps://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

相关文章：