使用 localStorage 在页面之间传递变量并在链接中传递变量
我正在学习 js，最近，我为我的英语和我的问题的明显性道歉。我有两个问题，我会很感激纯 JavaScript 的解决方案。
按照几个教程，我在 HTML 页面中安装了一个 localStorage 脚本。
页面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
至于第二个问题，我没有得到肯定的结果。
阿波罗的战车2回答
-
慕勒3428872
而不是使用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> -
九州编程
您刚刚发现了为什么同一页面上不能有两个具有相同 ID 的元素 - 只有第一个可以工作。但是，类的工作方式几乎与 ID完全相同，因此只需className在两个位置使用相同的 ID：<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>有关信息和代码示例，请参阅此 SO 问题。
随时随地看视频慕课网APP
相关分类
JavaScript