如何使用 jquery 在 sessionStorage 中存储单选按钮值答案

【问题标题】：how to store radio button value in sessionStorage with jquery如何使用 jquery 在 sessionStorage 中存储单选按钮值
【发布时间】：2018-02-27 18:46:00
【问题描述】：

我的导航栏中有单选按钮，我想为一个会话存储它的值，或者我可以说它在用户访问网站的不同页面时自动保留相同的值，但在浏览器或选项卡关闭时重置。我发现的是 sessionStorage，我试过了，但不幸的是它不起作用，这是我的代码

  <lab

  console.log($('[type=radio]').length);
  
        $("#option1").click(function() {
          console.log('I am inside radio type'+this.value);
          sessionStorage.setItem('option', this.value);
        });

        $("#option2").click(function() {
          console.log('I am inside radio type'+this.value);
          sessionStorage.setItem('option', this.value);
        });

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <!-- <div class="btn-group btn-group-toggle" data-toggle="buttons"> -->
  <!-- <label class="btn btn-secondary active"> -->
  <input type="radio" value="shop" name="option" id="option1">option1
  <!-- </label> -->
  <!-- <label class="btn btn-secondary"> -->
  <input type="radio" value="product" name="option" id="option2">option2
  <!-- </label> -->
  <!-- </div> -->

el class="btn btn-secondary active"> 选项1 选项2

在脚本中我尝试的是

$('[type=radio]').click(function() {
        var value = $('[name="option"]').val();
        sessionStorage.setItem('option',value);
});

console.log(sessionStorage.getItem('option'));

每次都是唯一的打印选项1，这是我想要实现的正确方式吗？

【问题讨论】：

this 将是您单击的选项。没有必要查找它。只需参考this.valuesessionStorage.setItem('option', this.value);
感谢回复，我发现问题在于单击单选按钮功能没有运行，我试过这个 $('input[type=radio]').click(function() { console. log('我在收音机类型里面'); sessionStorage.setItem('option', this.value); });在单击单选按钮时，consol 上没有打印任何内容
听起来你正试图在它们存在于页面之前绑定它们。
我无法理解，在单击单选按钮时，为什么控制台上没有打印任何内容？上面的代码有问题吗？
如果在您执行$('[type=radio]') 时DOM 中不存在输入字段，它将找不到它们来绑定事件处理程序。当您运行该操作时，它们必须存在。

标签： javascript jquery html session-storage sessionstorage

【解决方案1】：

类型值需要格式化为一个带引号的字符串，如下所示：

$('input[type="radio"]').click(function() { 
    console.log('I am inside radio type'); 
    sessionStorage.setItem('option', this.value); 
});

如果您在加载脚本后动态加载这些按钮，则可以将侦听器附加到文档对象：

$(document).on('click', 'input[type="radio"]', function() { 
    console.log('I am inside radio type'); 
    sessionStorage.setItem('option', this.value); 
});

【讨论】：

【解决方案2】：

在点击事件中存储选中的单选按钮的值如下，

 $(function() {
         alert(sessionStorage.getItem('option'));
         $('[type=radio]').click(function() {
                  alert(this.value);           sessionStorage.setItem('option',this.value);
          });    
    });

【讨论】：