我可以每次都在本地存储中存储具有相同属性的对象数组，即使我在 javaScript 中刷新页面也会保留吗？

Question

我已经写一个程序来输入，并存储在本地存储作为对象到一个数组。 在我不刷新页面并提供输入之前，它每次都会创建一个新数组，并将这些具有相同属性的输入值放入一个对象中。 bur 每当我刷新页面并再次运行该函数时，本地存储就会丢失所有以前的数据并开始存储新数据。 虽然我没有设计结构，也没有给出任何输入验证。 但是只需插入输入并检查本地存储，您就会明白。 即使页面已刷新，如何将这些数据存储到本地存储中？

提前致谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="regform">
        <div id="name">
            <h2 class="name">Name</h2>
            <input id="firstName" type="text" name="first" value=""><br>
            <label class="firstlabel" name="firstname">first name</label>
            <input id="lastName" type="text" name="last" value=""><br>
            <label class="lastlabel" name="lastname">last name</label>
        </div>

        <h2 class="name">Email</h2>
        <input id="email" type="text" name="email">

        <h2 class="name">Password</h2>
        <input id="pass" type="password" name="password" autocomplete="off">

        

        <h2 class="name">Phone</h2>
        <input id="code" type="text" name="area_code">
        <label class="area-code">Area Code</label>
        <input id="number" type="text" name="phone">
        <label class="phone-number">Phone Number</label>
        
         <button type="submit" id="btnreg" >Register</button>

    </form>

    <script>
        var fname=document.getElementById("firstName");
var lname=document.getElementById("lastName");
var btn=document.getElementById("btnreg");
var password=document.getElementById("pass");
var mail=document.getElementById("email");
var ariacode=document.getElementById("code");
var pnumber=document.getElementById("number");


let datas = [];



var addData= (ev)=>{
    ev.preventDefault();
    var data = {
        name: fname.value +" "+ lname.value,
        passcode: password.value,
        email: mail.value,
        phonenumber: "+"+ariacode.value +" "+ pnumber.value
    };
    datas.push(data);
    document.getElementById('regform').reset();

    var data_serialized = JSON.stringify(datas);
    localStorage.setItem("datas", data_serialized);
    var data_deserialized = JSON.parse(localStorage.getItem("datas"));

    
};
    document.addEventListener('DOMContentLoaded', ()=>{
        btn.onclick=addData;
    });
    </script>
</body>
</html>

Answer 1

在将新数据分配给它之前，您是否尝试检查本地存储以查看它是否为空？ 如果不这样做，您可能会在每次刷新页面时重写本地存储。 请出示您的代码。

Answer 2

我稍微改变了你的代码，现在它可以工作了。 问题是：您只需在每次提交时覆盖存储条目。 解决方案：读取现有条目，推送新数据，写入新条目。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="regform">
        <div id="name">
            <h2 class="name">Name</h2>
            <input id="firstName" type="text" name="first" value=""><br>
            <label class="firstlabel" name="firstname">first name</label>
            <input id="lastName" type="text" name="last" value=""><br>
            <label class="lastlabel" name="lastname">last name</label>
        </div>

        <h2 class="name">Email</h2>
        <input id="email" type="text" name="email">

        <h2 class="name">Password</h2>
        <input id="pass" type="password" name="password" autocomplete="off">

        

        <h2 class="name">Phone</h2>
        <input id="code" type="text" name="area_code">
        <label class="area-code">Area Code</label>
        <input id="number" type="text" name="phone">
        <label class="phone-number">Phone Number</label>
        
         <button type="submit" id="btnreg" >Register</button>

    </form>

    <script>
        var fname=document.getElementById("firstName");
var lname=document.getElementById("lastName");
var btn=document.getElementById("btnreg");
var password=document.getElementById("pass");
var mail=document.getElementById("email");
var ariacode=document.getElementById("code");
var pnumber=document.getElementById("number");


let datas = [];



var addData= (ev)=>{
    ev.preventDefault();
    var data = {
        name: fname.value +" "+ lname.value,
        passcode: password.value,
        email: mail.value,
        phonenumber: "+"+ariacode.value +" "+ pnumber.value
    };
    
    var datas = JSON.parse(localStorage.getItem("datas"));

    datas.push(data);
    document.getElementById('regform').reset();

    var data_serialized = JSON.stringify(datas);
    localStorage.setItem("datas", data_serialized);
    
    
};
    document.addEventListener('DOMContentLoaded', ()=>{
        btn.onclick=addData;
    });
    </script>
</body>
</html>

我可以每次都在本地存储中存储具有相同属性的对象数组，即使我在 javaScript 中刷新页面也会保留吗？

问题描述

2 个解决方案

解决方案1
0 2020-10-30 16:05:24

解决方案2
0 2020-11-02 08:14:59

我可以每次都在本地存储中存储具有相同属性的对象数组，即使我在 javaScript 中刷新页面也会保留吗？

问题描述

2 个解决方案

解决方案1 0 2020-10-30 16:05:24

解决方案2 0 2020-11-02 08:14:59

解决方案1
0 2020-10-30 16:05:24

解决方案2
0 2020-11-02 08:14:59