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

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 按钮不会做任何事情.我使用 代码片段 系统只是为了让三个代码组在展开之前隐藏起来，以保持整洁.您必须将每一个复制出来并将其粘贴到您的开发环境中的一个文件中以使它们工作(在运行它们之前，您的系统上必须存在所有这三个).