如何記住用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>

來源

2017-07-26 Dushee

你最好的賭注很可能要保存數據在URL或Cookie中。 –

寫在stackoverfloweth的答案的想法是正確的但他確實代碼沒有工作。

繼承人使用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>

來源

2017-07-26 14:00:09

謝謝你先生魯迪..它運作良好..非常感謝你 – 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"); 
}

來源

2017-07-26 13:01:24 stackoverfloweth

您能否詳細闡述一下？ – Dushee

看我的編輯，應該讓你關閉 – stackoverfloweth

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

如何記住用JavaScript刷新頁面後點擊按鈕？

回答

相關問題