如何使用jQuery在sessionStorage中存储单选按钮值

Question

我的导航栏中有一个单选按钮，我想存储一个会话的值，或者可以说，当用户访问网站的不同页面时，它会自动保留相同的值，但是在关闭浏览器或选项卡时会重置。 我发现的是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”> Option1 Option2

在脚本中我尝试的是

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

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

每次都只有它的打印选项1，这是我想要实现的正确方法吗？

Answer 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); 
});

Answer 2

在click事件中，存储选中的单选按钮的值，如下所示：

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