提问者:小点点

从button radio在localStorage中设置var,并将其传递到其他页面


在这篇文章:在页面之间传递变量,感谢@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");
});

共1个答案

匿名用户

您的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>