How to add a task to local storage when it's added to the list when we click add button so that when a page is loaded the new task does not disappear. I tried in a list function in javascript but it didn't work. I tried using local storage setitem and getitem and then appending them to the list.
localStorage.setItem("uls",list);
var bvc=localStorage.getItem("uls");
document.getElementsByTagName("ul")[0].appendChild(bvc);
function incomplete() {
let checkboxes = document.querySelectorAll(".checkb");
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
if (checkboxes[i].parentElement)
checkboxes[i].parentElement.parentElement.style.display = "none";
}
}
}
function addlist (){
let newText=document.getElementById("input").value;
var list= document.createElement("li");
list.id="lio";
list.innerText=newText;
var radio=document.createElement("input");
if(newText!=""){
radio.type="checkbox";
radio.className="checkb";
let sp= document.createElement("span");
sp.appendChild(radio);
var trash=document.createElement("button");
trash.id="trashed";
trash.className="delete-trash";
trash.innerHTML='<i class="fa fa-trash-o" ></i>';
list.appendChild(sp);
list.appendChild(trash);
localStorage.setItem("uls",list);
var bvc=localStorage.getItem("uls");
document.getElementsByTagName("ul")[0].appendChild(bvc);
}
trash.onclick=function(){
if (confirm("Do you really want to delete this?")){
var value=trash.parentElement;
value.remove();
}
};
document.getElementById("input").value = "";
}
function deletes(element){
if (confirm("Do you really want to delete this?")){
var value=element.parentElement.parentElement;
value.remove();
}
}
function allTasks(){
let checkboxes=document.querySelectorAll(".checkb");
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked || !(checkboxes[i].checked)) {
checkboxes[i].parentElement.parentElement.style.display = "inline-block";
}
}
} body {
font-family: "Rubik";
overflow:none;
background-image: url("purple\ back.avif");
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
margin: 0;
padding: 0;
overflow:auto;
}
.container {
height: 910px;
display: flex;
justify-content: center;
z-index: 1;
}
.page {
border: 2px solid #333;
background-color: #f0f0f0;
padding: 20px;
}
.box {
overflow-y: auto;
border: 3px solid #333;
height: 600px;
width: 500px;
border-radius: 30px;
margin-top:25px;
background-color: white;
}
#heading {
text-align: left;
font-weight: bold;
color: #333;
padding: 10px;
margin: 0;
}
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.btn {
padding: 8px 16px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
margin-right: 10px;
}
.buttons {
margin-left: 7em;
}
li {
width: 100%;
height: 35px;
background-color: #fff;
margin-top: 5px;
padding: 5px;
display: inline-block;
margin-left: -35px;
margin-bottom: 20px;
}
#trashed {
font-size: 20px;
color: red;
}
.delete-trash {
margin: 2px;
background-color: #fff;
color: red;
border: none;
float: right;
cursor: pointer;
}
.addTask{
margin-top: 15px;
display: flex;
flex-wrap: wrap;
margin-left: 10px;
}
.addT{
height: 35px;
border-radius: 20px;
width: 65%;
margin-left: 40px;
}
.add{
height: 40 px;
border-radius: 20px;
width: 100px;
position: relative;
right: 45px;
background-color: rgb(248, 124, 79);
color: white;
}
.radio{
margin: 4px;
}
.checkb{
float: left;
margin-right: 4px;
}
@media screen and (max-width:480px){
.box{
width: 300px;
height: 600px;
}
.add{
height:35px;
position: relative;
left: 85px;
top: 10px;
}
.buttons{
margin-left: 2rem;
}
.btn{
margin: 2px;
}
} <!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List1</title>
</head>
<body>
<div class="container">
<div class="box">
<h1 id="heading">To Do List</h1>
<br>
<div class="addTask"><input type="text" class="addT" id="input" placeholder="Add your tasks">
<button class="add" onclick="addlist()">ADD</button></div>
<div class="content" id="content">
<br><br>
<ul>
<li > <span class="radio"><input type="checkbox" class="checkb"></span>Learn the basic structure and tags for creating web pages. <span class="delete2"><button class="delete-trash" onclick="deletes(this)"><i class="fa fa-trash-o" style="font-size:20px;color:red"></i></button></span></li>
<li ><span class="radio"><input type="checkbox"name="check" class="checkb"></span>Study styling and layout techniques to make. <span class="delete2"><button class="delete-trash" onclick="deletes(this)"><i class="fa fa-trash-o" style="font-size:20px;color:red"></i></button></span></li>
<li ><span class="radio"><input type="checkbox" name="check" class="checkb"></span> Understand the fundamentals of programming . <span class="delete2"><button class="delete-trash" onclick="deletes(this)"><i class="fa fa-trash-o" style="font-size:20px;color:red"></i></button></span></li>
<li ><span class="radio"><input type="checkbox" name="check" class="checkb"></span> Create websites that adapt to different screen sizes. <span class="delete2"><button class="delete-trash" onclick="deletes(this)"><i class="fa fa-trash-o" style="font-size:20px;color:red"></i></button></span></li>
</ul>
<!-- MAIN BUTTONS ADD DELETE-->
<div class="buttons">
<button class="btn" onclick="allTasks()">ALL TASKS</button>
<button class="btn" onclick="incomplete()" >INCOMPLETE TASKS</button>
</div>
</div>
</div>
</div>
</body>
</html>
