Javascript-форум - Как создать localstorage для сайта?

Как создать 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>