如何记住用JavaScript刷新页面后点击按钮？

问题描述：

当点击复选框时，用于突出显示表格记录的以下代码。但是，一旦我刷新页面突出显示的记录消失。即使刷新页面后，如何保持高亮度记录？如何记住用JavaScript刷新页面后点击按钮？

<style> 
 
    .highlight { 
 
     background-color: yellow; 
 
    } 
 
    </style> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 
     $("#Table input").click(function() { 
 
      if ($(this).is(":checked")) { 
 
       $(this).parent().parent().addClass("highlight"); 
 
      } else { 
 
       $(this).parent().parent().removeClass("highlight"); 
 
      } 
 
     }); 
 
    }); 
 
    </script> 
 
    <body> 
 
    <div class="col-lg-10"> 
 
    <form name="f"> 
 
    <table id="Table" border="1"><tr> 
 
     <td><input type="checkbox" name="cb1" id="cb1" value="y" /></td> 
 
     <td>Click me</td> 
 
    </tr><tr> 
 
     <td><input type="checkbox" name="cb2" id="cb2" value="y" /></td> 
 
     <td>Click me</td> 
 
    </tr><tr> 
 
     <td><input type="checkbox" name="cb3" id="cb3" value="y" /></td> 
 
     <td>Click me</td> 
 
    </tr></table> 
 
    </div>

你最好的赌注很可能要保存数据在URL或Cookie中。 –

答

写在*eth的答案的想法是正确的但他确实代码没有工作。

继承人使用localStorage是确实工作（在预览窗口不会在这里工作，但会如果您尝试在本地）的例子：

<style> 
 
.highlight { 
 
    background-color: yellow; 
 
} 
 
</style> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
Array.prototype.remove = function() { 
 
    var what, a = arguments, L = a.length, ax; 
 
    while (L && this.length) { 
 
     what = a[--L]; 
 
     while ((ax = this.indexOf(what)) !== -1) { 
 
      this.splice(ax, 1); 
 
     } 
 
    } 
 
    return this; 
 
}; 
 

 
var checked = []; 
 

 
$(document).ready(function() { 
 
    if (localStorage.getItem("checked") == null) 
 
     localStorage.setItem("checked", checked); 
 

 
    $("#Table input").click(function() { 
 
     if ($(this).is(":checked")) { 
 
      $(this).parent().parent().addClass("highlight"); 
 
      checked.push($(this).attr("id")); 
 
     } else { 
 
      $(this).parent().parent().removeClass("highlight"); 
 
      checked.remove($(this).attr("id")); 
 
     } 
 
     localStorage.setItem("checked", JSON.stringify(checked)); 
 
    }); 
 

 
    var saved = JSON.parse(localStorage.getItem("checked")); 
 
    for (var i = 0;i < saved.length; i++) { 
 
     var itemAtIndex = $("#" + saved[i] + ""); 
 
     itemAtIndex.click(); 
 
     itemAtIndex.parent().parent().addClass("highlight"); 
 
    } 
 
}); 
 
</script> 
 
<body> 
 
<div class="col-lg-10"> 
 
<form name="f"> 
 
<table id="Table" border="1"><tr> 
 
    <td><input type="checkbox" name="cb1" id="cb1" value="y" /></td> 
 
    <td>Click me</td> 
 
</tr><tr> 
 
    <td><input type="checkbox" name="cb2" id="cb2" value="y" /></td> 
 
    <td>Click me</td> 
 
</tr><tr> 
 
    <td><input type="checkbox" name="cb3" id="cb3" value="y" /></td> 
 
    <td>Click me</td> 
 
</tr></table> 
 
</div>

谢谢你先生鲁迪..它运作良好..非常感谢你 – Dushee

答

您必须保存在某个地方的状态，无论是在URL作为查询字符串或者你可以使用浏览器的localStorage。然后当页面加载时，检查该状态并相应地突出显示。

尝试这样：

$("#Table input").click(function() { 
    if ($(this).is(":checked")) { 
     if(!localStorage.checked) { 
      localStorage.checked = []; 
     } 
     localStorage.checked.push($(this)); 
     $(this).parent().parent().addClass("highlight"); 
    } else { 
     for (var i = 0;i < localStorage.checked.length; i++) { 
      var itemAtIndex = localStorage.checked[i]; 
      if(itemAtIndex == $(this)){ 
       localStorage.splice(i, 1); 
      } 
     } 
     $(this).parent().parent().removeClass("highlight"); 
    } 
}); 


//on page load 
for (var i = 0;i < localStorage.checked.length; i++) { 
    var itemAtIndex = localStorage.checked[i]; 
    itemAtIndex.parent().parent().addClass("highlight"); 
}

您能否详细阐述一下？ – Dushee

看我的编辑，应该让你关闭 – *eth

谢谢你的努力先生但它不起作用 – Dushee

如何记住用JavaScript刷新页面后点击按钮？

相关推荐