如何将ViewBag中的复选框选中数据列表存入LocalStorage？

你的代码存在几个关键问题导致无法正常工作：

• cc是ViewBag传递的选中项字符串数组，不存在checked属性，直接存cc.checked会得到undefined
• 存储时用的key是"cc"，读取时却用"#cc"，key不匹配导致无法获取数据
• document.getElementById("#cc")写法错误（getElementById不需要加#），且你有多个复选框，不能仅操作单个元素

修正后的实现代码 #

1. 存储选中项到LocalStorage

（可在表单提交时或页面加载时执行，根据你的业务时机选择）

// 从ViewBag获取选中的课程列表
var selectedCourses = @Html.Raw(Json.Encode(ViewBag.Courses));
// 将数组转为JSON字符串存入LocalStorage（LocalStorage仅支持存储字符串）
localStorage.setItem("selectedCourses", JSON.stringify(selectedCourses));

2. 页面加载时恢复复选框勾选状态

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 从LocalStorage读取数据，若不存在则返回空数组
    var savedCourses = JSON.parse(localStorage.getItem("selectedCourses")) || [];
    // 获取所有课程复选框（请根据实际情况修改选择器，比如用name属性或class）
    var checkboxes = document.querySelectorAll('.course-checkbox');
    
    // 遍历每个复选框，匹配保存的选中项
    checkboxes.forEach(function(checkbox) {
        // 判断当前复选框的value是否在保存的列表中，设置勾选状态
        checkbox.checked = savedCourses.includes(checkbox.value);
    });
});

补充说明 #

• 确保所有复选框都设置了value属性，且值与ViewBag中存储的字符串完全一致
• 如果需要在表单提交时更新LocalStorage的内容，可以监听表单的submit事件：

document.querySelector('your-form-selector').addEventListener('submit', function() {
    // 获取当前所有选中的复选框值
    var currentSelected = Array.from(document.querySelectorAll('.course-checkbox:checked')).map(cb => cb.value);
    localStorage.setItem("selectedCourses", JSON.stringify(currentSelected));
});

内容的提问来源于stack exchange，提问作者Yash