Как создать localstorage для сайта?
Нужно чтобы после перезагрузки оставались все элементы
const selectAllButton = document.getElementById('btn')
const inputElement = document.getElementById('input')
const ulElement = document.getElementById('list')
const actionPanel1 = document.getElementById('actionPanel1')
const actionPanel2 = document.getElementById('actionPanel2')
actionPanel2.style = 'display: none'
let todoList = []
inputElement.addEventListener('keydown', (event , data) => {
if ((event.key === 'Enter' || event.keyCode === 13) && (inputElement.value) && (inputElement.value != ' ')){
todoList.unshift({
content: inputElement.value,
done: false,
selected : false
})
inputElement.value = ''
createElements()
}
})
function createElements() {
ulElement.innerHTML = ''
// for (let todoItem of todoList) {
for (let index = 0; index < todoList.length; index++) {
const todoItem = todoList[index]
const liElement = document.createElement('li')
liElement.className = 'list-group-item'
ulElement.append(liElement)
const divElement = document.createElement('div')
divElement.className = 'form-group form-check'
liElement.append(divElement)
const inputCheck = document.createElement('input')
divElement.append(inputCheck)
inputCheck.type = 'checkbox'
inputCheck.className = 'form-check-input'
inputCheck.id = 'todoItem' + index
inputCheck.checked = todoItem.selected
const labelElement = document.createElement('label')
divElement.append(labelElement)
labelElement.className = 'form-check-label' + index
if (todoItem.done) {
labelElement.className += ' todoDone'
}
labelElement.setAttribute('for', 'todoItem' + index)
labelElement.innerText = todoItem.content
if (!todoItem.done) {
const buttonDone = document.createElement('button')
divElement.append(buttonDone)
buttonDone.className = 'btn btn-outline-primary'
buttonDone.innerText = 'Done'
buttonDone.style.float='right';
buttonDone.addEventListener('click' , () => {
todoItem.done = !todoItem.done
createElements()
})
} else {
const buttonRemove = document.createElement('button')
divElement.append(buttonRemove)
buttonRemove.className = 'btn btn-outline-danger'
buttonRemove.innerText = 'Remove'
buttonRemove.style.float='right';
buttonRemove.addEventListener('click' , () => {
todoList = todoList.filter(currentTodoItem => currentTodoItem !== todoItem)
createElements()
})
}
inputCheck.addEventListener('click' , () => {
todoItem.selected = inputCheck.checked
createElements()
})
}
const someSelected = todoList.some(todoItem => todoItem.selected)
if (someSelected) {
actionPanel2.style = 'display: flex'
actionPanel1.style = 'display: none'
} else {
actionPanel2.style = 'display: none'
actionPanel1.style = 'display: flex'
}
}
document.getElementById('doneAction').addEventListener('click' , () => {
for (const todoItem of todoList) {
if (todoItem.selected) {
todoItem.done = true
todoItem.selected = false
}
}
createElements()
})
document.getElementById('restoreAction').addEventListener('click' , () => {
for (const todoItem of todoList) {
if (todoItem.selected) {
todoItem.done = false
todoItem.selected = false
}
}
createElements()
})
document.getElementById('removeAction').addEventListener('click' , () => {
for (const todoItem of todoList) {
if (todoItem.selected) {
todoList = todoList.filter(currentTodoItem => currentTodoItem !== todoItem)
}
}
createElements()
})
selectAllButton.addEventListener('click', () => {
for (todoItem of todoList) {
todoItem.selected = true
}
createElements()
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ToDo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
<h4 class="card-title">Todo application (by <a href="#" target="_blank">Egor Mushka</a>)</h4>
</div>
<div class="card-body">
<div class="input-group" id='actionPanel1'>
<div class="input-group-prepend">
<span id="selectAllAction">
<button class="btn btn-outline-primary" type="button" id="btn">Select all</button>
</span>
</div>
<input type="text" class="form-control" id='input'>
</div>
<div id='actionPanel2'>
<div class="btn-group btn-block">
<button type='button' class='btn btn-success' id="doneAction">Done</button>
<button type='button' class='btn btn-info' id="restoreAction">Restore</button>
<button type='button' class='btn btn-danger' id="removeAction">Remove</button>
</div>
</div>
</div>
<ul class="list-group list-group-flush" id='list'>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
