页面1.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

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

标签： javascripthtml

解决方案

而不是使用id，您可以class用于显示结果，因为 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>

javascript - 使用 localStorage 在页面之间传递变量并在链接中传递变量

问题描述