Javascript 如何在localstorage中修改阵列中的现有对象
我有一个包含对象的数组，然后该数组存储在localStorage中。我希望能够在对象存储在localStorage中之后修改对象内部的变量。我要修改的项目是，当检测到对应的复选框被选中时，我想将该复选框的状态从false更改为true。最好的方法是什么。这是密码Javascript 如何在localstorage中修改阵列中的现有对象,javascript,html,local-storage,Javascript,Html,Local Storage,我有一个包含对象的数组，然后该数组存储在localStorage中。我希望能够在对象存储在localStorage中之后修改对象内部的变量。我要修改的项目是，当检测到对应的复选框被选中时，我想将该复选框的状态从false更改为true。最好的方法是什么。这是密码 <!DOCTYPE html> <html> <head> <title>TodoList App</title> <!-- bootstrap cdn
<!DOCTYPE html>
<html>
<head>
<title>TodoList App</title>
<!-- bootstrap cdn -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
<style type="text/css">
/*variables*/
:root {
--righteous-font: 'Righteous', cursive;
}
body {
/*background-color: #536691;*/
background-image: url("http://pctechtips.org/apps/todo/img/Chicago-Wallpaper-3.jpg");
min-height: 100vh;
z-index: -10;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
font-size: 1.3rem;
}
.hero {
position: absolute;
min-height: 100vh;
min-width: 100vw;
top: 0;
bottom: 0;
background-color: rgba(31, 34, 118, 0.5);
}
h1 {
margin-top: 12rem;
margin-bottom: 0px;
padding-bottom: 0px;
font-family: var(--righteous-font);
}
.lead {
font-size: 1.5rem;
font-family: var(--righteous-font);
}
/*hr {
margin-top: 2rem;
border: 1px solid white
}*/
ul {
/*border-top: 2px solid white;*/
margin-top: 2rem;
list-style: none;
/*display: none;*/
}
li {
border-bottom: 1px solid white;
padding: 0.5rem 0 0.5rem 0;
margin: 0 1rem 0 1rem;
}
.checkboxes {
float: right;
line-height: 15px;
width: 17px;
height: 17px;
background-color: #e9ecef;
border: 1px solid #e9ecef;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="hero">
<div class="container">
<h1 class="display-2 text-center">TodoList</h1>
<p class="lead text-center">Welcome to my todoList applications</p>
<div class="row">
<form id="form" class="col-8 mx-auto">
<div class="input-group">
<input id="input" class="form-control" placeholder="Enter todo list item" value="this is a todo item list">
<span>
<button id="btn" type="button" class="btn btn-primary">Submit</button>
</span>
</div>
</form>
</div>
<div class="row">
<ul id="list" class="list col-8 mx-auto">
<!-- <li>this is a todo item <input type="checkbox" class="checkbox"></li>
<li>this is a todo item <input type="checkbox" class="checkbox"></li> -->
</ul>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
//variables
var list = document.getElementById("list");
var input = document.getElementById("input");
var btn = document.getElementById('btn');
var id = 1;
var todoList = [];
//{item: "item", isChecked: "false"};
var todoItem = "";
//button event listener
btn.addEventListener("click", addTodoItem);
//list event listener for checkbox
list.addEventListener("click", boxChecked);
if(localStorage.length > 0) {
displayList();
}
//add todo list item
function addTodoItem() {
if(input.value === "") {
alert("Input field can't be empty!");
}
else {
if(list.style.borderTop === "") {
list.style.borderTop = "2px solid white";
}
var li = document.createElement("li");
var text = document.createTextNode(input.value);
li.id = "li-"+id;
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.className = "checkboxes"
checkbox.id = "box-"+id;
li.appendChild(text);
li.appendChild(checkbox);
list.appendChild(li);
id++;
addToLocalStorage();
}
}
//adding strike through style when checkbox clicked
function boxChecked(event) {
const element = event.target;
//ignore clicks on anything else other than checkbox
if(element.type !== "checkbox") return;
console.log(element.id);
//apply css style
element.parentNode.style.textDecoration = "line-through";
}
//adding items to localstorage
function addToLocalStorage() {
console.log(localStorage.toString());
todoItem = {item: input.value, isChecked: "false"};
todoList.push(todoItem);
//checking localsotorage exists
if(typeof(Storage) !== "undefined") {
localStorage.setItem("todoList", JSON.stringify(todoList));
}
else {
alert("localstorage not available in browser!");
}
}
/* display all todo list items */
function displayList() {
todoList = JSON.parse(localStorage.getItem("todoList"));
list.style.borderTop = "2px solid white";
for(var i = 0; i < todoList.length; i++) {
var li = document.createElement("li");
var text = document.createTextNode(todoList[i].item);
li.id = "li-"+id;
var checkbox = document.createElement("input");
/*if(Boolean(todoList[i].isChecked)) {
checkBox.checked = true;
checkBox.style.textDecoration = "line-through";
}*/
checkbox.type = "checkbox";
checkbox.className = "checkboxes"
checkbox.id = "box-"+id;
li.appendChild(text);
li.appendChild(checkbox);
list.appendChild(li);
id++;
}
}
}
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</body>
</html>
TodoList应用程序
/*变数*/
：根{
--正义字体：“正义”，草书；
}
身体{
/*背景色：#536691*/
背景图像：url（“http://pctechtips.org/apps/todo/img/Chicago-Wallpaper-3.jpg");
最小高度：100vh；
z指数：-10；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
颜色：白色；
字体大小：1.3rem；
}
.英雄{
位置：绝对位置；
最小高度：100vh；
最小宽度：100vw；
排名：0；
底部：0；
背景色：rgba（31,34,118,0.5）；
}
h1{
边缘顶部：12雷姆；
边缘底部：0px；
垫底：0px；
字体系列：var（--font）；
}
.铅{
字体大小：1.5rem；
字体系列：var（--font）；
}
/*人力资源{
边缘顶端：2rem；
边框：1px纯白
}*/
保险商实验室{
/*边框顶部：2件纯白*/
边缘顶端：2rem；
列表样式：无；
/*显示：无*/
}
李{
边框底部：1px纯白；
填充：0.5雷姆0.5雷姆0；
保证金：0.1rem 0.1rem；
}
.复选框{
浮动：对；
线高：15px；
宽度：17px；
高度：17px；
背景色：#e9ecef；
边框：1px实心#e9ecef；
边界半径：3px；
}
任务列表
欢迎使用我的todoList应用程序
提交
window.onload=函数（）{
//变数
var list=document.getElementById（“列表”）；
var输入=document.getElementById（“输入”）；
var btn=document.getElementById（'btn'）；
var-id=1；
风险值todoList=[]；
//{项目：“项目”，勾选：“假”}；
var todoItem=“”；
//按钮事件侦听器
btn.addEventListener（“单击”，addTodoItem）；
//为复选框列出事件侦听器
list.addEventListener（“单击”，复选框选中）；
如果（localStorage.length>0）{
显示列表（）；
}
//添加待办事项列表项
函数addTodoItem（）{
如果（input.value==“”）{
警报（“输入字段不能为空！”）；
}
否则{
如果（list.style.borderTop==“”）{
list.style.borderTop=“2px纯白”；
}
var li=document.createElement（“li”）；
var text=document.createTextNode（input.value）；
li.id=“li-”+id；
var checkbox=document.createElement（“输入”）；
checkbox.type=“checkbox”；
checkbox.className=“复选框”
checkbox.id=“box-”+id；
李.附件（文本）；
li.appendChild（复选框）；
表1.儿童（李）；
id++；
addToLocalStorage（）；
}
}
//单击复选框时添加贯穿样式
功能框已选中（事件）{
常量元素=event.target；
//忽略除复选框之外的任何其他内容的单击
如果（element.type！=“复选框”）返回；
console.log（element.id）；
//应用css样式
element.parentNode.style.textDecoration=“行通过”；
}
//将项目添加到本地存储
函数addToLocalStorage（）{
log（localStorage.toString（））；
todoItem={item:input.value，已选中：“false”}；
todoList.push（todoItem）；
//正在检查localsotorage是否存在
if（类型（存储）！=“未定义”）{
setItem（“todoList”，JSON.stringify（todoList））；
}
否则{
警报（“浏览器中的本地存储不可用！”）；
}
}
/*显示所有待办事项列表项*/
函数displayList（）{
todoList=JSON.parse（localStorage.getItem（“todoList”）；
list.style.borderTop=“2px纯白”；
for（var i=0；i