Question

当用户单击复选框时，我有以下代码突出显示具有三种不同颜色的表记录。每次用户每次打开页面时，如何使用cookie保存点击的值并抓住cookie？我不知道如何使用cookies。答案真的很感激

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<style>
.highlight-red {
    background-color: red;
}    
.highlight-green {
    background-color: green;
}
.highlight-yellow {
    background-color: yellow;
}    
</style>
<div class="col-lg-10">
    <table id="Table" border="1">
        <tr class="highlight">
        <td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>
        <td>Click me</td>
        </tr>
        <tr>
        <td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td>
        <td>Click me</td>
        </tr>
        <tr>
        <td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td>
        <td>Click me</td>
        </tr>
    </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

    function changeSoma(data, color){
            if(data.checked && color == 'red'){
                $(data).parent().parent().addClass("highlight-red");
            }
            else{
                $(data).parent().parent().removeClass("highlight-red");
            }
            if(data.checked && color == 'green'){
                $(data).parent().parent().addClass("highlight-green");
            }
            else{
                $(data).parent().parent().removeClass("highlight-green");
            }
            if(data.checked && color == 'yellow'){
                $(data).parent().parent().addClass("highlight-yellow");
            }
            else{
                $(data).parent().parent().removeClass("highlight-yellow");
            }
    }
</script>
</body>
</html>

Answer 1

localStorage比我想象的更容易。您可以设置并通过localStorage.setItem or localStorage.getItem获取并保留，直到您将其删除!!!

<script>

    var cond = JSON.parse(localStorage.getItem("check"));
    for(var i in cond) {
        if(cond[i]) {
         $("#"+i).attr("checked",true);
         $("#"+i).parent().parent().addClass("highlight-"+cond[i]);
        }
    }
    function changeSoma(data, color){
            var state;
            if(localStorage.getItem("check") == null) {
                state = {cb1:0,cb2:0,cb3:0};
            } else{
                state = JSON.parse(localStorage.getItem("check"));
            }

            if(data.checked) {
                $(data).parent().parent().addClass("highlight-"+color);
                state[data.id]= color;
            } else {
                $(data).parent().parent().removeClass("highlight-"+color);
                state[data.id]= 0;
            }
            localStorage.setItem("check",JSON.stringify(state));
    }
</script>

Answer 2

我假设您希望即使用户访问您网站上的其他网页，然后在该网页中再次选择它们，也仍然需要选择这些值。

如上所述here，您可以使用Timer t = new Timer(); t.scheduleAtFixedRate( new TimerTask() { public void run() { try { getTokenDAO().updateDate(newtok, new Date()); } catch (Exception e) { e.printStackTrace(); } System.out.println("5 minutes passed"); } }, 0, // run first occurrence immediately 300000); } javascript属性设置Cookie。

但是，上面提到的属性是以分号分隔的键值对。你必须操纵字符串才能添加/编辑一个值。

添加了所需的值后，您可以再次读取它，然后设置要选择的行。

要获取所选值，您可以使用document.cookie并将其放在$(data).val()中。从那里，您可以检查是否已选中changeSoma()。如果已选中，请将其添加到$(data).is(':checked')，如document.cookie

Answer 3

使用localStorage更容易，但由于您正在使用jQuery，请使用jQuery cookie插件

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>

<body>
  <style>
    .highlight-red {
      background-color: red;
    }

    .highlight-green {
      background-color: green;
    }

    .highlight-yellow {
      background-color: yellow;
    }

  </style>
  <div class="col-lg-10">
    <table id="Table" border="1">
      <tr class="highlight">
        <td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>
        <td>Click me</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td>
        <td>Click me</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td>
        <td>Click me</td>
      </tr>
    </table>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>
  <script>
    $(document).ready(function() {
      var checkedBox = $.cookie('checkedBox');
      console.log(checkedBox);
      if(checkedBox !== undefined) {
        // to check only
        //$(checkedBox).attr('checked', true);
        // emulate click to check and change the class
        $(checkedBox).each(function() {
          this.click();
        })
      }

    })

    function changeSoma(data, color) {
      if(data.checked && color == 'red') {
        $(data).parent().parent().addClass("highlight-red");
      }
      else {
        $(data).parent().parent().removeClass("highlight-red");
      }
      if(data.checked && color == 'green') {
        $(data).parent().parent().addClass("highlight-green");
      }
      else {
        $(data).parent().parent().removeClass("highlight-green");
      }
      if(data.checked && color == 'yellow') {
        $(data).parent().parent().addClass("highlight-yellow");
      }
      else {
        $(data).parent().parent().removeClass("highlight-yellow");
      }
      // set cookie
      var checked = "";
      $('input[type="checkbox"]').each(function() {
        if($(this).prop('checked')) {
          checked += "#" + this.id + ","; // #cb, jQuery id selector
        }
      })

      checked = checked.replace(/,$/, '')
      console.log(checked);
      $.cookie('checkedBox', checked);
    }

  </script>
</body>

</html>

每次用户打开页面时，如何使用cookie来保存点击的值都会获取cookie

3 个答案: