如何在本地存儲中修改數組內的現有對象
[英]how to modify existing object inside an array in localstorage
問題描述
我有一個包含對象的數組，然后該數組存儲在localStorage中。 我希望能夠在將對象存儲在localStorage中之后修改其內部的變量。 我要修改的項目是在檢測到相應的復選框時，我想將該復選框的狀態從false更改為true。 最好的方法是什么。 這是代碼
<!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>
1 個解決方案
解決方案1
2 2018-02-25 00:30:21
我將在boxChecked函數中進行設置：
function boxChecked(event) { const element = event.target; //ignore clicks on anything else other than checkbox if(element.type !== "checkbox") return; var newTodo = JSON.parse(localStorage.getItem("todoList"))[element.id.slice(element.id.length-1)-1]; newTodo.isChecked = element.checked.toString(); var todoList = JSON.parse(localStorage.getItem("todoList")); todoList[element.id.slice(element.id.length-1)-1] = newTodo; localStorage.setItem("todoList", JSON.stringify(todoList)); //apply css style element.parentNode.style.textDecoration = "line-through"; }
根據 javascript 中的條件修改現有數組 object
[英]modify the existing array object based on condition in javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.