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”＆gt; 选项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); 
});

Answer 2

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

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

如何使用jquery

2 个答案: