我有一些 JavaScript 可以找到所有选中的项目并在内存中排列数据。
我需要显示一个模式弹出窗口。而且，当该弹出窗口关闭时，我将再次需要上面创建的数据。
我正在尝试确定存储该数据的最佳方式，这样我就不需要重新创建它。我曾经认为我可以使用
data-xxx我认为另一种方法是在页面级别范围内创建变量。但 JavaScript 不是我的主要语言，我不确定变量在不同事件中的位置。
有什么超级可靠的方式来存储数据以便以后可用？
您可以创建一个全局变量
let app = {...}app.data.checkboxState下面是一个示例程序，展示了如何应用它：
const app = { // variable to hold info about program
data : {
checkboxState : {} // store checkbox state here
}
}
app.getState = function() { // method to get state and sive it in memory
let checkboxes = document.getElementsByClassName("checkbox"); // get all checkboxes
for (let i=0; i<checkboxes.length; i++) { // loop through them
let checkbox = checkboxes[i];
app.data.checkboxState[checkbox.id] = checkbox.checked // save this checkboxs' state
}
}
app.showState = function() { // method to show user the state
alert("App state is: \n " + JSON.stringify(app.data.checkboxState).replaceAll('{', '').replaceAll('}','').replaceAll(',', '\n '));
}
app.run = function() { // method to execute program
app.getState();
app.showState();
}html, body {
font-family:arial;
}
h2 {
color:turquoise;
}
button {
color:black;
background:turquoise;
border:none;
padding:5px 10px;
border-radius:2px;
width:100px;
cursor:pointer;
margin:5px 0px;
}
button:hover {
box-shadow: 1px 1px 4px 0px black;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Check options below: </h2>
<p>
<input class="checkbox" id="op1" type="checkbox"></input><span>Option 1</span><br>
<input class="checkbox" id="op2" type="checkbox"></input><span>Option 2</span><br>
<input class="checkbox" id="op3" type="checkbox"></input><span>Option 3</span><br>
<input class="checkbox" id="op4" type="checkbox"></input><span>Option 4</span><br>
<input class="checkbox" id="op5" type="checkbox"></input><span>Option 5</span><br>
</p>
<button onclick="app.run()">OK</button><br>
<button onclick="app.getState()">Save state</button><br>
<button onclick="app.showState()">Show state</button><br>
</body>
</html>