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（）方法。键和值可以是任何字符串：

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

Answer 2

要添加/编辑，请使用localStorage.setItem("key", "value1");

获得价值使用localStorage.getItem("key");

Answer 3

要从localStorage获取项目：

userName = localStorage.getItem('user')

要在localStorage中设置项目：

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

如何使用JavaScript在本地存储中存储添加和编辑值存储？

3 个答案: