Как можно сделать сохранение в "приложении заметок" через localStorage для каждой создаваемой заметки? (JS)

Как можно сделать сохранение в "приложении заметок" через localStorage для каждой создаваемой заметки? (JS)

const btn = document.querySelector('.buton');
const container = document.querySelector('.container');

btn.addEventListener('click', Write);

let inp = document.querySelector('.inp');

let Spisok = document.getElementById('spisok');

function SaveData()
{
    localStorage.setItem('todoEl', Spisok.innerHTML);
}
function Write()
{
    let task = document.createElement('li');
    let zapiska = document.createElement('span');
    let delBtn= document.createElement('button');
    
    if(inp.value !== "")
    {
        task.appendChild(document.createElement('p'))
        task.appendChild(zapiska);
        task.appendChild(delBtn);
        Spisok.appendChild(task);
        inp.placeholder = "";
    }
    else
    {
        inp.placeholder = "Введите что-нибудь";
    }
    task.classList.add('spisokEl');
    zapiska.innerText = inp.value;
    zapiska.classList.add('centering');
    console.log(zapiska);
    
    delBtn.innerText = "✖";
    delBtn.classList.add('centeringBtn');

    delBtn.addEventListener('click', function deleteSelf() 
    {
        this.parentElement.remove();
        localStorage.removeItem('todoEl');
    })
    SaveData()
}

if(localStorage.getItem('todoEl'))
{
    Spisok.innerHTML = localStorage.getItem('todoEl');
}
<html>
    <head>
        <link rel="stylesheet" href="List.css">
    </head>

    <body>
    <div align="center">
        <input class="inp"></input> 
        <input type="button" class="buton" value="Записать"></input>
        <p>
        <ul id="spisok">

        </ul>
    </div>
        <script src="List.js"></script>
    
    </body>
</html>


Ответы (0 шт):