从按钮单选设置 localStorage 中的 var 并将其传递给其他页面

问题描述

这个讨论是这篇文章的衍生:在页面之间传递变量,

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 上 - Run 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 并将其传递给其他页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！