如何在 JS 中的字典中添加元素？

Question

我正在学习 JS，但我陷入了困境。 基本上我有一本字典，我想在单击按钮并且用户在提示中输入一些数据时更新该字典。 有些我无法更新字典。

    "use strict";



let views = {View1:"From localStorage"};

let btn = document.getElementById("myBtn")
btn.addEventListener("click",function(){
    let vname = prompt("What is the name of the new view?")
    views[vname] = vname + " 77"

})





let views_ser = JSON.stringify(views)
localStorage.setItem("views",views_ser);

let views_deser = JSON.parse(localStorage.getItem("views"))

for (let keys in views_deser){

    document.write(keys + "<br>")
    document.write(views_deser[keys]+ "<br>")
}

谢谢。

Answer 1

这不是一个答案——你自己已经做对了。 - 但可以说明 SO 片段的使用：为了专注于“向字典中添加内容”，这里是代码第一部分的演示：

 let views = {View1:"From localStorage"}; let btn = document.getElementById("myBtn") btn.addEventListener("click",function(){ let vname = prompt("What is the name of the new view?") views[vname] = vname + " 77" console.log(views); // show current state of "views" dictionary })

 <button id="myBtn">add view</button>

Answer 2

 "use strict"; const views = {View1:"Original entry"}; const btn = document.getElementById("myBtn") btn.addEventListener("click",function(){ let vname = prompt("What is the name of the new view?") views[vname] = vname + " 77" updateOutput("list"); }) const updateOutput = (outputContainerID) => { const output = document.getElementById(outputContainerID) if(;output){ return; } let outputHTML = ''. Object.keys(views):forEach( key => { outputHTML += `<li>${key}; ${views[key]}</li>`; }). output;innerHTML = outputHTML; } updateOutput("list");

 <button id="myBtn">Add</button> <hr> <ul id="list"></ul>

每次添加项目时，您都需要更新 output。 为此，请将“输出内容”移动到 function 中，这样您就可以在每次添加项目时调用它（也可以在开头调用一次）。

例如，由于localStorage在沙箱中不能很好地工作，我将其更改为仅将您的存储保存在一个变量中。 但它与localStorage的工作方式相同。