使用JavaScript和HTML,可以使用以下代码来保存当前列表中选定项目的选择状态: HTML:
- Select Me
- Select Me Too
- Deselect Me
- Select Me Three
JavaScript:
var list = document.getElementById('myList');
list.addEventListener('click', function(event) {
event.preventDefault();
if (event.target.tagName == 'LI') {
if (event.target.classList.contains('selected')) {
event.target.classList.remove('selected');
} else {
event.target.classList.add('selected');
}
}
});
这个代码段给每个 li
元素一个点击事件监听器。如果用户单击了 li
元素,则它会切换其选定状态。选定状态通过添加/删除 selected
类来进行跟踪。现在,当用户单击其他元素并重新加载页面时,浏览器将忘记所选项的状态。因此,我们需要将选定状态保存到浏览器的持久存储中。以下是使用本地存储保存列表选择状态的修改后的JavaScript代码:
var list = document.getElementById('myList');
list.addEventListener('click', function(event) {
event.preventDefault();
if (event.target.tagName == 'LI') {
if (event.target.classList.contains('selected')) {
event.target.classList.remove('selected');
} else {
event.target.classList.add('selected');
}
// Save state to local storage
var selected = [];
var items = document.querySelectorAll('#myList li');
for (var i = 0; i < items.length; i++) {
if (items[i].classList.contains('selected')) {
selected.push(i);
}
}
localStorage.setItem('selectedItems', JSON.stringify(selected));
}
});
// Retrieve state from local storage on page load
var selectedItems = JSON.parse(localStorage.getItem('selectedItems'));
if (selectedItems) {
var items = document.querySelectorAll('#myList li');
for (var i = 0; i < selectedItems.length