如何使用本地存储在网页之间传输值？答案

【问题标题】：How do I transfer a value between webpages using local storage?如何使用本地存储在网页之间传输值？
【发布时间】：2021-10-05 16:57:24
【问题描述】：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SwinTech</title>
</head>

<body>
    <form action="apply.html" method="post">
        <div class="consultantinformation">
            <h2> Job reference number: </h2>
            <br>
            <h4 id="jobreference2"> 6LZ9W </h4>
        </div>
        <button id="submitbutton">Submit</button>
    </form>
    <script>
        document.getElementById("submitbutton").addEventListener("click", setItem);
        localStorage.setItem("jobreference1", "1FN43");
    </script>
</body>

</html>

我正在尝试使用本地存储将“jobreference1”从第一个 sn-p 传输到第二个。如您所见，我已将其存储在一个外部 JavaScript 文件中并将其发送到另一个文件。但是，当我尝试在第二个 sn-p 的 HTML 代码中调用它时，它根本不起作用。我决定在我的第二个 sn-p 中包含我所有的 HTML 和 JavaScript 代码，因为我相信这就是问题所在。谢谢。

注意：没有内联 JavaScript 或 jQuery。

【问题讨论】：

每个来源都有本地存储。您可以使用存储在源之间共享数据
@jabaa 你介意详细说明一下吗？我真的不明白。谢谢。
只能使用会话存储来做到这一点吗？
您的问题不清楚。如果它适用于会话存储，它也适用于本地存储。
@jabaa 也许我措辞错误，但我所说的网页是指同一网站上的页面。因此，当您在第一个网站上提交表单时，它会存储该值并在您被重定向到的表单上检索它。这显示在我发送的 sn-ps 中。

标签： javascript html forms

【解决方案1】：

这是一个工作示例。 index.html 设置页面加载时的引用。表单提交重定向到apply.html，并在页面加载时读取正确的值。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SwinTech</title>
</head>

<body>
    <form action="apply.html" method="post">
        <div class="consultantinformation">
            <h2> Job reference number: </h2>
            <br>
            <h4 id="jobreference2"> 6LZ9W </h4>
        </div>
        <button>Submit</button>
    </form>
    <script>
        localStorage.setItem("jobreference1", "1FN43");
    </script>
</body>

</html>

apply.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <p>Job Reference Number: <span id="job1"></span></p>
    <script>
        document.getElementById("job1").innerHTML = localStorage.getItem("jobreference1");
    </script>
</body>

</html>

【讨论】：

这行得通。谢谢你。你知道为什么这只能作为内联 JS 而不是在外部文件中吗？
@Wheelchaircoder 我试过了，它与外部文件中的 JavaScript 代码完全一样。
有趣。我将尝试消除某些代码以找出问题所在。另外，有没有办法使它仅在实际提交表单时才存储在本地存储中？
@Wheelchaircoder 是的，您可以添加一个事件侦听器来侦听表单的提交事件，然后才将项目设置到存储中。
我已经编辑了我的原始帖子以显示我添加的事件侦听器。但它不起作用。我为我不断的问题道歉，我保证这是最后一次。谢谢。