如何将添加和编辑值存储在javascript的本地存储中？

Question

我正在创建待办事项列表以显示示例静态数据。如果我单击按钮，示例数据将一一添加到列表中。当我单击删除按钮时正确删除。 如果我想刷新页面给定显示的数据显示在页面中，并且在刷新页面后单击内容以编辑页面中的内容，则页面中显示的编辑内容。这些值从本地存储中显示。 我的问题是如何使用javascript存储相同的插入和编辑值存储在本地存储中。我的示例代码是Given

这是我添加和编辑内容的脚本。我想创建本地存储并将添加和编辑值存储在本地存储中。刷新页面后，最后创建/编辑的值显示在列表中..

<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/ 以获取有关此内容的优秀教程。