通过单选按钮在localStorage中设置var并将其传递到其他页面 [英] Setting a var in localStorage from button radio and pass it to other pages
问题描述
This discussion is the spin off of this post:passing-variables-between-pages,
我已对问题进行了编辑，以使脚本更加清晰，请谁提供此版本中使用的面额的答案.
I have edited the question in order to provide More clarity on the scripts, please who will give any answers to use denomination used in this version.
A.html
<form action="b.html"> // username field, let's say "Macbeth"
<input type="text" id="txt"/>
<input type="submit" value="nome" onClick="passvalues();"/>
</form>
<span id="result">Macbeth</span> // display username
<script>
function passvalues()
{
var nme = document.getElementById("txt").value; // set var username nme = textvalue
localStorage.setItem("textvalue", nme);
return false;
}
</script>
它可以设置localStorage并显示它.
B.html
// show the username multiple times in an html text.
<p><strong><span class="result">Macbeth</span></strong>, Nice name!
It's the first time I've heard it! mmm...and tell me<strong>Macbeth<span class="result"></span></strong> which gender you are?</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>
// form to obtain the gender chosen by the user, let's say "male"
`<p>I am a <span class="selectedGender"></span> of course!</p>`
// display the selected gender
<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>
<script>
var selectedGender = document.getElementsByClassName('selectedGender');
{
className.innerHTML = localStorage.getItem("textvalue");
};
</script>
它有效，显示所选的性别.
C.html
我真的非常抱歉，但是我在这里完全迷失了自己. 我尝试了几次解决方案建议的方法:
I am really, really sorry but I am completely lost and confused here. I tried several times one of the suggested by solutions:
<span id="welcome"></span> to page 4 <span id="name"></span>
<script>
var username = localStorage.getItem("textvalue");
var usergender = localStorage.getItem("gender");
document.getElementById('name').innerHTML = username;
document.getElementById('gender').innerHTML = usergender;
if (usergender === 'female'){
document.getElementById('welcome').innerHTML = 'brava';
}else if (usergender === 'male'){
document.getElementById('welcome').innerHTML = 'bravo';
}else{
document.getElementById('welcome').innerHTML = 'bene';
}
</script>
我知道我是一个无可救药的案件，我听不懂.
I know I'm a hopeless case, I don't understand it.
- 我必须在哪个页面中插入此脚本?
- 此脚本替换了以前的脚本?
我不能使用与用户名相同的脚本吗?
Can't I use the same scripting used for the username?
1-获得选择:"selectedgender"
1 - get the choice:"selectedgender"
2-使用(当然会更改元素名称)显示它
2 - display it with (of course changing the elements names)
<script>
function passvalues()
{
var nme = document.getElementById("txt").value; // set var username nme = textvalue
localStorage.setItem("textvalue", nme);
return false;
}
</script>
3-并显示:
<span id="result">Macbeth</span> // display username
感谢您的关注.
推荐答案
为了使您的生活更轻松，我使用略有不同的变量名重新编写了脚本，这些变量名更有意义.我测试了这些；他们工作.如果您同时打印这两个脚本集并将这些新脚本与旧脚本进行比较，则可以更清楚地看到它们的工作原理.
To make life a little easier for you, I re-wrote your scripts using slightly different variable names that make a little more sense. I tested these; they work. If you print both sets and compare these NEW scripts with the older scripts, you can see a little more clearly how it all works.
A页:
<form action="b.html">
<input type="text" id="txt"/>
<input type="submit" value="nome" onClick="passvalues();"/>
</form>
<span id="result"></span>
<script>
function passvalues(){
var nme = document.getElementById("txt").value; // set var username nme = youzer
localStorage.setItem("youzer", nme);
return false;
}
</script>
页面B :
<!-- show the username multiple times in an html text. -->
<p>Hello, <strong><span class="uname">Macbeth</span></strong>, Nice name!</p>
<p>It's the first time I've heard it! mmm...and tell me, <strong><span class="uname"></span></strong>, which gender you are?</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>I am a <span class="selectedGender"></span> of course!</p>
<script>
/* Schlep stored name into all elements with className "uname" */
var unamez = document.getElementsByClassName('uname');
[].slice.call(unamez).forEach(function (className) {
className.innerHTML = localStorage.getItem("youzer");
});
var frmGender = document.genderForm.gender;
var prev = null;
for (var i = 0; i < frmGender.length; i++) {
frmGender[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);
//Delay 2 seconds, then go to page (C)
setTimeout(function(){
window.location.href = 'c.html';
},2000);
});
}
</script>
页面C :
<span id="greetz"></span> to page 4, <span id="name"></span>!
<p></p><a href="a.html">Return to page A</a></p>
<script>
var username = localStorage.getItem("youzer");
var usergender = localStorage.getItem("gender");
document.getElementById('name').innerHTML = username;
// Below commented out because <span id="gender"> does not exist on page
// document.getElementById('gender').innerHTML = usergender;
if (usergender === 'female'){
document.getElementById('greetz').innerHTML = 'Brava';
}else if (usergender === 'male'){
document.getElementById('greetz').innerHTML = 'Bravo';
}else{
document.getElementById('greetz').innerHTML = 'Bene';
}
</script>
请注意，这些代码段不会起作用".在StackOverflow上-运行代码段" 按钮不会执行任何操作.我使用 Code Snippet 系统只是为了简洁起见，才允许隐藏这三个代码组，直到扩展为止.您必须复制每个文件并将其粘贴到开发环境中的文件中，以使其正常工作(在运行它们之前，这三个文件必须存在于您的系统中).
Note that these code snippets don't "work" on StackOverflow - the Run Code Snippet buttons won't do anything. I used the Code Snippet system only to allow the three code groups to be hidden until expanded, for neatness. You must copy each one out and paste it into a file in your dev environment to make them work (all three must be present on your system before running them).
这篇关于通过单选按钮在localStorage中设置var并将其传递到其他页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
