javascript - 在 fetch 加载页面后保持复选框处于选中状态

Question

我正在寻找一种在加载页面后保持复选框选中的方法，我在下面做的是，我有一个带有名称的表格，我想如果用户选中了复选框，那么它将更新表格中的数据库并进行排序然后再次返回以刷新页面，如果用户取消选中该复选框，它将再次更新数据库并再次重新加载页面..但是在这里，当我选中该复选框时，页面自动重新加载并且未选中复选框。

在用户取消选中它之前，我怎么能保持选中状态？

function check(){
        let checkstatus = document.querySelectorAll("input[type='checkbox']");
        for(let i = 0; i < checkstatus.length; i++){
            let checkedID = checkstatus[i].getAttribute("data-checked");
            checkstatus[i].addEventListener('change', function () {
                if(checkstatus[i].checked){
                    let url  = "update.php?checked=" + checkedID;
                    fetch(url, { credentials: 'include' })
                        .then(response => response.text())
                        .then(bringnames)
                    checkstatus[i].checked = true;
                }else if(!checkstatus[i].checked){
                    let url  = "update.php?unchecked=" + checkedID;
                    fetch(url, { credentials: 'include' })
                        .then(response => response.text())
                        .then(bringnames)
                }
            });
        }
    }
  
    function bringnames(){
    let url = "bringnames.php";
    fetch(url, { credentials: 'include' })
        .then(response => response.json())
        .then(function(data){
    console.log("Hello");
    })  
    }

标签： javascriptajax

Answer 1

您可以使用 localStorage 存储复选框状态，刷新页面后，您可以从 localStorage 获取状态。

示例：在刷新之前保存 checkboxStatus ：

localStorage.setItem('checkboxStatus', true)

刷新后：

const checkboxStatus =  localStorage.getItem('checkboxStatus')