0

如果 JavaScript 可用，我正在尝试使用 unobtrusive-ajax 来允许站点将其内容更新为 AJAX，如果不可用，则更新为静态页面。我想支持浏览器的Back按钮在历史上向后移动。

当用户浏览网站时，我正在使用 JavaScript 的历史 API 来操纵浏览器历史记录。我将 HTML（通过innerHTML）和 DOM 的当前状态（通过 JQuery 的serialize方法）存储在历史对象中。当用户点击Back时，HTML 和 DOM 分别从缓存的 HTML 和序列化的 DOM 中恢复。

但是，我丢失了有关在页面加载 ( "checked"="checked") 时选中但用户未选中的复选框的信息。

根据https://api.jquery.com/serialize/上的 JQuery 文档

来自复选框和单选按钮（“单选”或“复选框”类型的输入）的值仅在它们被选中时才被包括在内。

这里的“值”是指选中状态，而不是value复选框的状态。

这是错误的设计吗？当它与 HTML不同时，它不应该包含检查值吗？

有条件序列化的其他元素上是否还有其他属性？

4

2 回答 2

0

JQueryserialize用于序列化表单以提交到服务器，除非另有说明，否则假定不选中复选框。

问题是deserialize来自https://github.com/kflorence/jquery-deserialize/在应用序列化字符串中的属性之前没有清空属性。

我通过在应用反序列化之前取消选中所有复选框来解决这个问题。

document.getElementById("thepage").innerHTML = stateHtml;
$("#thepage input[type='checkbox']").prop("checked", false);
$("#thepage").deserialize(stateDomSerialized);
于 2021-02-18T22:12:29.713 回答
0

无论您尝试使用浏览器历史操作历史...这里的主要交易是实时保存复选框状态，因此每次 JS 运行时，您都会检索保存的值。

可以通过 localStorage 保存复选框的状态。

以下内容在页面重新加载时完美运行。您的历史操作应该绕过后退按钮的“正常”行为，而不是再次运行 JS。我把它留给你。;)

// Check box state array
let checkboxesState = []

// If that is the very first page load and there is no local storage.
if(localStorage.getItem("checkedCheckboxes") === null){

  $("input[type='checkbox']").each(function(index){
    checkboxesState.push(this.checked)

    // Add a data attribute for the index of the checkbox
    this.setAttribute("data-chk_index",index)
  })
  // Save
  localStorage.setItem("checkedCheckboxes", JSON.stringify(checkboxesState))
}

// If there already is a checkbox state storage
else{
  checkboxesState = JSON.parse(checkboxesState)
  
  $("input[type='checkbox']").each(function(index){
    this.checked = checkboxesState[index]

    // Add a data attribute for the index of the checkbox
    this.setAttribute("data-chk_index",index)
  })
}

// Update the array on click
$("input[type='checkbox']").on("click", function(){
  checkboxesState[this.getAttribute("data-chk_index")] =  this.checked
  
  // Update Storage
  localStorage.setItem("checkedCheckboxes", JSON.stringify(checkboxesState))
  
  // That is the current state of the saved array
  console.log(localStorage.getItem("checkedCheckboxes"))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox">

检查我的CodePen，因为localStorageSO 代码段中不允许。

于 2021-02-18T00:46:52.387 回答