从按钮收音机在 localStorage 中设置一个 var 并将其传递给其他页面
Setting a var in localStorage from button radio and pass it to other pages
此讨论是此 post 的衍生：、
我已经编辑了问题以提供更清晰的脚本，请谁给出任何答案以使用此版本中使用的面额。
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
我真的非常抱歉，但我在这里完全迷失和困惑。
我尝试了几次建议的解决方案之一：
<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>
我知道我是个无药可救的人，我不明白。
- 我必须在哪个页面插入这个脚本？
- 这个脚本会取代之前的脚本吗？
我不能使用与用户名相同的脚本吗？
1 - 得到选项：“selectedgender”
2 - 显示它（当然改变元素名称）
<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
感谢关注。
您的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>
注意第二页的这一行：
localStorage.setItem("gender", this.value);
和第1页存储用户名的那一行几乎一模一样：
localStorage.setItem("textvalue", nme);
在你隐藏的localStorage中，你现在有两个变量：gender和textvalue，每个变量都存储了一些信息。自己检查一下 - 有一种方法可以查看 localStorage 区域：
INSTRUCTIONS FOR GOOGLE CHROME:
1. Run your app, and enter the data on both page 1 and page 2.
2. Press <kbd>F12</kbd> (or, right-click on the page and choose `Inspect Element`)
3. "Developer Tools" will open.
4. Note the menu at top that begins: `Elements | Console | Sources | Network >>`
If the last menu item is `>>` then click that - additional menu choices will drop-down
5. You want the menu item `Application` - click on that
6. You will see 5 groupings on the left: Application, Storage, Cache, Background... etc
7. In the Storage group, do you see `Local Storage`? That's what we want!
8. Click the drop-down triangle beside (at the left) "Local Storage"
9. Now, in the right side panel, you should see your "hidden" variables, and their current values
无论您在（您项目的）哪个 HTML 页面上，您都可以看到那些相同的变量 - 因此您可以告诉您的脚本 read那些变量.
所以，在第 3 页和第 4 页，写一些 javascript （代码在下面） 将：
(a) 读取一个 localStorage 值并将其存储在一个新变量中
(b) select 该页面上的适当元素（div、span、p 等）
(c) 将可变数据粘贴到元素中。
(d) 对其他 localStorage 条目重复
现有 javascript 代码之所以不起作用，是因为它是为 page2 编写的，其中目标元素称为 class="result"。注意 javascript 的第一行：
var bob = document.getElementsByClassName('result');
（我更改了变量的名称，因为该名称并不重要 - 重要的是 getElementsByClassName('result')）。如果页面上没有带有 class="result" 的元素，javascript 将在那里失败。所以，在第 3 页和第 4 页，死亡！
然后，在第 4 页，您可以这样做：
<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>
最后的注释：
您不需要这段漂亮代码的原因：
[].slice.call(result).forEach(function (className)...
是因为这个代码var result = document.getElementsByClassName('result')
创建一个包含类名 result 的所有元素的列表（一个 array）。 然后 .slice 代码循环遍历该数组，并将 username 放入每个 element.result 中。仅在第 2 页上有一个元素（好吧，两个元素）的类名是“result”。在第 3 页（没有 className“result”）元素上，代码失败。
为了让您的生活更轻松一些，我使用略有不同的变量名称重新编写了您的脚本，这些名称更有意义。我测试了这些；他们工作。如果您打印这两组并将这些新脚本与旧脚本进行比较，您可以更清楚地了解它们是如何工作的。
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>
请注意，这些代码片段在 Whosebug 上“不起作用”- 运行 代码片段 按钮不会执行任何操作。我使用 代码片段 系统只是为了让三个代码组在展开之前隐藏起来，以保持整洁。您必须复制每一个并将其粘贴到您的开发环境中的一个文件中才能使它们正常工作（所有这三个都必须在 运行 它们之前出现在您的系统中）。
此讨论是此 post 的衍生：
我已经编辑了问题以提供更清晰的脚本，请谁给出任何答案以使用此版本中使用的面额。
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
我真的非常抱歉，但我在这里完全迷失和困惑。 我尝试了几次建议的解决方案之一：
<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>
我知道我是个无药可救的人，我不明白。
- 我必须在哪个页面插入这个脚本？
- 这个脚本会取代之前的脚本吗？
我不能使用与用户名相同的脚本吗？
1 - 得到选项：“selectedgender”
2 - 显示它（当然改变元素名称）
<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
感谢关注。
您的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>
注意第二页的这一行：
localStorage.setItem("gender", this.value);
和第1页存储用户名的那一行几乎一模一样：
localStorage.setItem("textvalue", nme);
在你隐藏的localStorage中，你现在有两个变量：gender和textvalue，每个变量都存储了一些信息。自己检查一下 - 有一种方法可以查看 localStorage 区域：
INSTRUCTIONS FOR GOOGLE CHROME:
1. Run your app, and enter the data on both page 1 and page 2.
2. Press <kbd>F12</kbd> (or, right-click on the page and choose `Inspect Element`)
3. "Developer Tools" will open.
4. Note the menu at top that begins: `Elements | Console | Sources | Network >>`
If the last menu item is `>>` then click that - additional menu choices will drop-down
5. You want the menu item `Application` - click on that
6. You will see 5 groupings on the left: Application, Storage, Cache, Background... etc
7. In the Storage group, do you see `Local Storage`? That's what we want!
8. Click the drop-down triangle beside (at the left) "Local Storage"
9. Now, in the right side panel, you should see your "hidden" variables, and their current values
无论您在（您项目的）哪个 HTML 页面上，您都可以看到那些相同的变量 - 因此您可以告诉您的脚本 read那些变量.
所以，在第 3 页和第 4 页，写一些 javascript （代码在下面） 将：
(a) 读取一个 localStorage 值并将其存储在一个新变量中
(b) select 该页面上的适当元素（div、span、p 等）
(c) 将可变数据粘贴到元素中。
(d) 对其他 localStorage 条目重复
现有 javascript 代码之所以不起作用，是因为它是为 page2 编写的，其中目标元素称为 class="result"。注意 javascript 的第一行：
var bob = document.getElementsByClassName('result');
（我更改了变量的名称，因为该名称并不重要 - 重要的是 getElementsByClassName('result')）。如果页面上没有带有 class="result" 的元素，javascript 将在那里失败。所以，在第 3 页和第 4 页，死亡！
然后，在第 4 页，您可以这样做：
<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>
最后的注释：
您不需要这段漂亮代码的原因：
[].slice.call(result).forEach(function (className)...
是因为这个代码var result = document.getElementsByClassName('result')
创建一个包含类名 result 的所有元素的列表（一个 array）。 然后 .slice 代码循环遍历该数组，并将 username 放入每个 element.result 中。仅在第 2 页上有一个元素（好吧，两个元素）的类名是“result”。在第 3 页（没有 className“result”）元素上，代码失败。
为了让您的生活更轻松一些，我使用略有不同的变量名称重新编写了您的脚本，这些名称更有意义。我测试了这些；他们工作。如果您打印这两组并将这些新脚本与旧脚本进行比较，您可以更清楚地了解它们是如何工作的。
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>
请注意，这些代码片段在 Whosebug 上“不起作用”- 运行 代码片段 按钮不会执行任何操作。我使用 代码片段 系统只是为了让三个代码组在展开之前隐藏起来，以保持整洁。您必须复制每一个并将其粘贴到您的开发环境中的一个文件中才能使它们正常工作（所有这三个都必须在 运行 它们之前出现在您的系统中）。