【问题标题】：Passing variables between pages using localStorage and passing variables in a link使用 localStorage 在页面之间传递变量并在链接中传递变量
【发布时间】：2020-07-14 18:08:02
【问题描述】：

我正在学习 js，最近，我为我的英语和我的问题的明显性道歉。我有两个问题，我会很感激纯 JavaScript 的解决方案。

根据几个教程，我在 HTML 页面中安装了 localStorage 脚本。

pag1.html

 <p> Hello! what's your name?</p>

 <form action="pag2.html">
  <input type="text" id="txt"/>
  <input type="submit" value="nome" onClick="passvalues();"/>
 </form>
 // the form has a link to pag2.html

<script>
 function passvalues()
    {
    var nme=document.getElementById("txt").value;
    localStorage.setItem("textvalue",nme);
    return false;
    }
</script>

假设用户输入了名字“Lucy”：

pag2.html

<p>Hi <span id="result">Lucy<span> nice to meet you!</p>`  // the name appears

<p>How are you today <span id="result">NOTHING</span>?</p>` // the name does not appear

<a href="pag3.html">pag3</a>

<script>
document.getElementById("result").innerHTML = localStorage.getItem("textvalue"); 
</script>

第一个问题

NAME 只出现一次是因为我的错误还是必须这样？我应该使用另一种语法让它出现几次吗？

pag3.html

<p><span id="result">Lucy</span>which gender designation do you prefer to be used with you?</p>

<p><a href="male.html">male</a></p>

<p><a href="female.html">female</a></p>

<p><a href="neutral.html">neutral</a></p>

<script>
document.getElementById("result").innerHTML = localStorage.getItem("textvalue"); 
</script>

第二个问题

在第 3 页中，用户必须选择他想被称为男性、女性还是中性。

一种解决方案是根据选择的类型设置三个不同的页面。但是这种解决方案并不优雅，并且会增加页面数量。

我似乎在某处读到，使用 js 可以转到另一个页面，同时通过链接设置布尔变量的值（真/假）。

类似这样的东西（语法是发明的）：

<a href="female.html" set var f true> female</a>

这将允许您通过插入三个“if”来创建一个登录页面：

 if (female true) {
    text = "brava";
  } else if (male true) {
    text= "bravo";
  } else {
    text = "bene";
  }

可以这样做吗？如何？我已经多次尝试这个脚本htmlgoodies，但对我来说太难了。

你好，

首先，我要感谢 @cssyphus 和 @Shahnawazh 的回答。

问题 1

我设法用脚本在同一页面上多次显示该名称：

<script>
 var result = document.getElementsByClassName('result');

[].slice.call(result).forEach(function (className) {
            className.innerHTML = localStorage.getItem("textvalue");
 });
 </script>

但是，我真的需要在所有需要显示名称的页面上都包含它吗？我也尝试将脚本插入到外部 js 页面中，但名称甚至没有出现一次。

问题 2

关于第二个问题，我没有得到肯定的结果。

【问题讨论】：

您是否要存储多个名称以便创建它们的列表？
不，我正在尝试编写非线性的多选文本，仅使用 CSS、HTML 和 Javascript。

标签： javascript html

【解决方案1】：

您可以使用class 来显示结果，而不是使用id，因为id 是唯一的。对于存储男性、女性或中性，您可以使用单选按钮，当您单击其中任何一个时，只需将结果保存在 localStorage 中。这是三页。

page1.html

<body>
    <p> Hello! what's your name?</p>

    <form action="page2.html">
        <input type="text" id="txt" />
        <input type="submit" value="name" onClick="passvalues();" />
    </form>

    <script>
        function passvalues() {
            var nme = document.getElementById("txt").value;
            localStorage.setItem("textvalue", nme);
            return false;
        }
    </script>

</body>

page2.html

<body>
    enter code here
    <p>Hi <span class="result">Lucy<span> nice to meet you!</p>

    <p>How are you today <span class="result"></span>?</p>

    <a href="page3.html">page3</a>

    <script>

        var result = document.getElementsByClassName('result');

        [].slice.call(result).forEach(function (className) {
            className.innerHTML = localStorage.getItem("textvalue");
        });

    </script>
</body>

page3.html

<body>
    <p><span class="result"></span> which gender designation do you prefer to be used with you?</p>

    <form name="genderForm" action="">
        <input type="radio" name="gender" value="male"> Male<br>
        <input type="radio" name="gender" value="female"> Female<br>
        <input type="radio" name="gender" value="neutral"> Neutral
    </form>

    <p>You've selected <span class="selectedGender"></span></p>

    <script>
        var result = document.getElementsByClassName('result');

        [].slice.call(result).forEach(function (className) {
            className.innerHTML = localStorage.getItem("textvalue");
        });

        var rad = document.genderForm.gender;
        var prev = null;
        for (var i = 0; i < rad.length; i++) {
            rad[i].addEventListener('change', function () {
                (prev) ? console.log(prev.value) : null;
                if (this !== prev) {
                    prev = this;
                }
                console.log(this.value);
                document.getElementsByClassName("selectedGender")[0].innerHTML = this.value;
                localStorage.setItem("gender", this.value);
            });
        }
    </script>
</body>

【讨论】：

感谢您的回答，很遗憾由于页面布局的原因，我无法使用单选按钮。不过，我会保存您的代码以供将来使用（手头有一个单选按钮总是很方便）。
没关系。您可以看到my answer here，您如何将参数从一个页面传递到另一个页面。在你的情况下，你可以这样做。
谢谢，我阅读了您的解决方案，但对我来说真的太复杂了
好的，很抱歉。
您好@shahnawazh，在收到一些澄清后，我决定选择您的答案作为正确答案，感谢您的帮助。

【解决方案2】：

您刚刚发现了为什么同一页面上不能有两个具有相同 ID 的元素 - 只有第一个可以工作。但是，类的工作方式几乎完全类似于 ID，因此只需在两个位置使用相同的 className：

<p>Hi <span class="result">Lucy<span> ...
...
<p>How are you today <span class="result">Lucy</span> ...

至于您的第二个问题，请再次使用 localStorage。设置一个不同的 localStorage 变量并读/写它。

但是，您可能想到的是使用查询字符串，如下所示：

<a href="person.html?gender=f">female</a>

有关信息和代码示例，请参阅 this SO question。

【讨论】：

嗨@cssyphus你的建议：女性;这很有趣，但我不知道如何在脚本中插入它，而且我想要一个纯 JavaScript 的解决方案。但是我不知道如何使链接压力设置为localStorage。我可以做的是每个链接指向一个不同的页面，每个页面都手动设置了它的性别：但这不是 javascript，它不是很优雅。你有什么建议吗？感谢您的关注。
@Meimei Shahnawaz Hossan 的回答向您展示了如何使用链接来设置 localStorage 变量。使用 Shahnawaz 在他的代码示例中使用的相同算法来设置人的性别。我认为使用 localStorage 是最适合您的解决方案 - 使用查询字符串对于您当前的技能水平来说太复杂了。 请考虑接受 Shahnawaz 的答案作为正确答案 -- 它包含解决这两个问题所需的一切。
非常感谢您的澄清。
嗨@cssyphus 我尝试将本地存储传递到另一个页面。这没用。请帮帮我。 sp class="selectedGender">/sp sp class="result"> /sp var selectedGender = document.getElementsByClassName('selectedGender'); .......加： var result = document.getElementsByClassName('result');......
你不需要传递 localStorage 到另一个页面。同一个域上的所有页面都可以访问同一个 localStorage 区域。如果您在第 1 页上 .set 一个名为 username（内容：“Bob”）的变量，您可以在任何其他页面上 .get 该变量，只需使用 var name = localStorage.getItem("username") （所以现在，在该页面上， var name 包含值 Bob)。您可以从您创建的任何页面中读取该 localStorage 变量。