如何在动态生成复选框时将复选框存储在浏览器缓存（本地存储）中？ [复制]

Question

我的网页中有一个动态表格。表中有 3 列。第一个是复选框列，第二个是课程代码，第三个是课程名称。我只想将复选框存储在本地缓存中，以便当用户刷新页面时，选定的复选框应该在那里。

注意：- 表格是从 XML 文件动态生成的，当您刷新页面时，复选框会再次生成，因为它们不是静态复选框。

function loadPage(xml) {
       var x, i, j, table, checkboxPrefix;
     xmlDoc = xml.responseXML;
     table = "";


      x = xmlDoc.getElementsByTagName("course");
      for (i = 0; i < x.length; i++) { 
        count++;
        xml_array.push(x[i].getElementsByTagName("courseCode")[0].childNodes[0].nodeValue);
        table += "<tr onclick='loadCourse(this)' class = '" +
         formatClass(x[i].getElementsByTagName("audience")[0].childNodes[0].nodeValue) + " " +
         formatClass(x[i].getElementsByTagName("duration")[0].childNodes[0].nodeValue) + " " +
         formatClass(x[i].getElementsByTagName("product")[0].childNodes[0].nodeValue) + " " +
         formatClass(getLanguage(x[i].getElementsByTagName("courseCode")[0].childNodes[0].nodeValue.toString().substring(10))) + " " +
         formatClass(getMedium(x[i].getElementsByTagName("courseCode")[0].childNodes[0].nodeValue.toString().charAt(2))) + " " +
        "'><***input type='checkbox' id='box"+ 
        i.toString()+
        "' class = 'selection'/>***</td><td class='row-ID2'><a class = 'course' href='#rowlinkModal' data-toggle='modal' data-target='#myModal' id='" +
         x[i].getElementsByTagName("courseCode")[0].childNodes[0].nodeValue.toString()
        + "' title='" +
        x[i].getElementsByTagName("courseTitle")[0].childNodes[0].nodeValue.toString() +
        "'>" + 
        x[i].getElementsByTagName("courseCode")[0].childNodes[0].nodeValue +

        "</a></td><td>"+
        x[i].getElementsByTagName("courseTitle")[0].childNodes[0].nodeValue +
        "</td></tr>";

      }

      document.getElementById("demo-body").innerHTML = table;

      document.getElementById("selectAllBoxes").checked = false;


    }

Answer 1

你有两个选择。会话存储和本地存储取决于您的需要。这两个都使用键值对。

本地存储没有过期日期，由 JavaScript 清除或清除浏览器缓存。

当浏览器窗口关闭时，会话存储被清除。

所以对于您的复选框，您可以这样做：（来自https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage）

// Save data to sessionStorage
sessionStorage.setItem('checkbox1', 'true');

// Get saved data from sessionStorage
var data = sessionStorage.getItem('checkbox1');

// Remove saved data from sessionStorage
sessionStorage.removeItem('checkbox1');

// Remove all saved data from sessionStorage
sessionStorage.clear();

请记住，这些值始终存储为字符串，要将它们作为布尔值获取，您必须对其进行解析。

var value = "true";
JSON.parse(value) === true; //true

本地存储的工作方式类似：

localStorage.setItem('checkbox1', 'true');