javascript - 如何使用 jquery 将单选按钮值存储在 sessionStorage 中

Question

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

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