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');

如何在浏览器缓存（本地存储）中存储复选框，因为复选框是动态生成的？

1 个答案: