在这篇文章:在页面之间传递变量,感谢@cssyphus和@shahnawaz的无价帮助,我设法在不同的html页面中显示用户输入。
第1页
<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>
第2页
<p>How are you today <span class="result"></span>?</p>
第二个问题是记录用户通过链接所做的选择,并在随后的页面上报告。
<a href="male.html">male</a>
<a href="female.html">female</a>
<a href="neutral.html">neutral</a>
提出的使用查询字符串的解决方案:
<a href="person.html?gender=f">female</a>
对我来说太难了。
另一个使用单选按钮的解决方案:
<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>
它工作,但它只在第一页显示选择。
当前问题
随后的html页面必须显示用户的选择,我尝试过以各种方式设置本地存储,以便在其他页面中显示选择,但都不起作用:
方法1
第1页(对不起,我不知道为什么即使我使用了Ctrl+K,'script'和'/script'标记也不会出现)
<radio button>
........
</radio button>
您已选择
,因此您是
var selectedGender = document.getElementsByClassName('selectedGender');
[].slice.call(result).forEach(function (className) {
className.innerHTML = localStorage.getItem("textvalue");
});
var result = document.getElementsByClassName('result');
[].slice.call(result).forEach(function (className) {
className.innerHTML = localStorage.getItem("textvalue");
});
function values()
{
var gen=document.getElementById("txt").value; // funzione set the var "gen"
localStorage.setItem("textvalue",gen);
return false;
}
第2页
You've selected <span class="selectedGender"></span>
So you are a <span class="result"></span>
var selectedGender = document.getElementsByClassName('selectedGender');
[].slice.call(result).forEach(function (className) {
className.innerHTML = localStorage.getItem("textvalue");
});
var result = document.getElementsByClassName('result');
[].slice.call(result).forEach(function (className) {
className.innerHTML = localStorage.getItem("textvalue");
});
方法2
第2页
You've selected <span class="selectedGender"></span>
So you are a <span class="result"></span>
var result = document.getElementsByClassName('result');
[].slice.call(result).forEach(function (className) {
className.innerHTML = localStorage.getItem("textvalue");
});
您的page3.html可以如下所示:
<!DOCTYPE html>
<html>
<head>
<title>Page 3</title>
</head>
<body>
<p><span id="name"></span>, please select your gender.</p>
<a id="Male" href="page4.html" onclick="saveSelectedGender(this)">Male</a><br/>
<a id="Female" href="page4.html" onclick="saveSelectedGender(this)">Female</a><br/>
<a id="Neutral" href="page4.html" onclick="saveSelectedGender(this)">Neutral</a><br/>
<script>
document.getElementById('name').innerHTML = localStorage.getItem("textvalue");
function saveSelectedGender(ele) {
localStorage.setItem('gender', ele.id);
}
</script>
</body>
</html>
您的page4.html可以如下所示:
<!DOCTYPE html>
<html>
<head>
<title>Page 4</title>
</head>
<body>
<p><span id="name"></span>, your selected gender is: <span id="gender"></span>.</p>
<script>
document.getElementById('name').innerHTML = localStorage.getItem("textvalue");
document.getElementById('gender').innerHTML = localStorage.getItem("gender");
</script>
</body>
</html>