数组中的本地存储答案

【问题标题】：Localstorage in array数组中的本地存储
【发布时间】：2018-07-28 20:17:02
【问题描述】：

我要做的是获取用户的电子邮件和姓名输入并将其 .push 到数组电子邮件簿中，它确实将电子邮件和姓名的 .values 推送到数组中，但是每当我将其存储到本地存储中时，它替换了现有的数组。请帮忙，谢谢！！

<script>
        document.addEventListener("DOMContentLoaded",docIsReady);
        var emailbook;
        function docIsReady(){

            emailbook=localStorage.getItem("emailbook");

            if (emailbook==null){
                emailbook=[];
                console.log(emailbook)
            }
            else {  
                emailbook=JSON.parse(emailbook);
                console.log(emailbook)
            }
        }
        function store() {
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var obj = {"name": name, "email": email};
            emailbook.push(obj);
            localStorage.setItem("email", JSON.stringify(emailbook));
        }
        console.log(localStorage);
        //var storedemail = JSON.parse(localStorage.getItem("email"));
    </script>

【问题讨论】：

替换现有数组是什么意思？它是否使 emailbook 中的其他属性无效？
localStorage 属性是只读的，因此您无法对其进行编辑。只有save、read 和remove 可用于localStorage。
localstorage按key存储值，你用同一个key设置，当然会替换旧值。
我假设您打算使用 emailbook 作为键，例如localStorage.setItem("emailbook", JSON.stringify(emailbook));
@GeorgeDaniel 通过替换现有数组，我指的是 var emailbook，例如 emailbook = {"abc@xyz.com"}，问题是当我输入新电子邮件时，它会替换 {"abc@ xyz.com"} 例如 {"cba@xyz.com"}

标签： javascript css html local-storage

【解决方案1】：

如何在 store() 方法中读取 localStorage，将所有内容推送到 emailbook 数组，推送 obj 并将其保存在 localStorage 中？

类似这样的：

var name = "foobar";
var email = "mail";
var emailbook = [];
var obj = {"name": name, "email": email};
if(localStorage.getItem('email') != null) {
    var tmp = JSON.parse(localStorage.getItem('email'));
    for(let i = 0;i<tmp.length;i++) {
        emailbook.push(tmp[i]);
    }

}
emailbook.push(obj);
localStorage.setItem("email", JSON.stringify(emailbook));

【讨论】：

当我尝试它时，键和值只是更改为 [{"name":"foobar","email":"mail"}]。我试图改变 var name = document.getElementById("name").value;同样适用于电子邮件，但它只返回 null
尝试记录 (console.log) "document.getElementById("name").value"。如果它为空，那么问题出在您的 html 中（可能是错误的 id？）。还要确保不要定义两次 emailbook 变量（我在 store 函数的范围内再次定义了这个变量，但是你将它定义为全局变量）
我记录了 document.getElementById("name").value 并且它按原样出现，但是当我记录变量“name”时，它显示为 null
这是我试图获取值的表单
在 jsfiddle 中运行良好：jsfiddle.net/2fmzha8y/11 您能否发布整个解决方案或在出现问题的地方创建解决方案？您是否在浏览器中刷新了脚本？