Как хранить добавление и редактирование хранилища значений в локальном хранилище в JavaScript?

Question

Я создаю список задач для отображения образцов статических данных.Если я нажму кнопку образца, данные добавляются в список по одному.Когда я нажимаю кнопку Удалить, кнопка удаляется правильно.Если я хочу обновить страницу, данные отображаются на странице, а также я щелкаю контент, чтобы редактировать контент на странице, после обновления страницы отредактированный контент отображается на странице.Эти значения отображаются из локального хранилища.Мой вопрос заключается в том, как хранить те же самые вставленные и редактировать значения хранятся в локальном хранилище с помощью JavaScript. Мой пример кода

это мой сценарий для добавления и редактирования содержимого.Я хочу создать Локальное хранилище и сохранить хранилище добавления и редактирования значений в локальном хранилище. После обновления страницы Последние созданные / отредактированные значения отобразятся в списке.

<button class="addbtn icon-plus" id="addnew" onclick="addSticky()">Add</button>
                <ul id="mynotes"></ul>    
var ul = document.getElementById("mynotes");
    var index=0;
    function addSticky()
    {

        var el=document.createElement("li");
        el.setAttribute("class","mylist");

        var cbtn=document.createElement("button");
        cbtn.setAttribute("class","close");
        cbtn.innerHTML="X";
        cbtn.setAttribute("onclick", "removeSticky()");

        var text=document.createElement("div");
        text.setAttribute("class","content");
        text.setAttribute("id","contentid_"+index);
        text.innerHTML="Sample content";

        el.appendChild(pin);
        el.appendChild(cbtn);
        el.appendChild(text);
        ul.appendChild(el);
        index++;

        var edit_data = document.getElementsByClassName('content');
        for (var i=0; i < edit_data.length; i++) {
            edit_data[i].addEventListener('click', edit);
        };

    }
    function removeSticky() {
        var clear = this.event.currentTarget.parentNode;
        ul.removeChild(clear);
    }



    function edit(){    
        var id = this.getAttribute('id');
        //alert(id);
        document.getElementById(id).contentEditable="true"; 
        //localStorage.clear();

    }

Answer 1

Для добавления / редактирования используйте localStorage.setItem("key", "value1");

Для получения значения используйте localStorage.getItem("key");

Answer 2

Чтобы получить элемент из localStorage:

userName = localStorage.getItem('user')

Чтобы установить элемент в localStorage:

userName = "newUser"
localStorage.setItem('user',userName)

Answer 3

Добавление данных в localStorage требует использования метода setItem ().Ключом и значением может быть любая строка:

localStorage.setItem('key', 'value')

// Or to set an array of items
const itemsArray = ["foo", "bar", 1, 2, 3];
localStorage.setItem('items', JSON.stringify(itemsArray))

Чтобы получить значение для определенного ключа, вам необходимо использовать метод getItem ():

localStorage.getItem('key')

Использовать removeItem() для удаления определенного ключа:

localStorage.removeItem('key')

Или очистите все локальное хранилище с помощью clear ():

localStorage.clear()

См. https://www.taniarascia.com/how-to-use-local-storage-with-javascript/ для хорошего учебника по этому вопросу.