Javascript 如何附加'；字符串'；将数据传输到本地存储_Javascript_Html

Javascript 如何附加'；字符串'；将数据传输到本地存储

javascript html

Javascript 如何附加'；字符串'；将数据传输到本地存储,javascript,html,Javascript,Html,const MyForm=document.querySelector（“#form”）； const Fname=document.querySelector（“#Fname”）； const Lname=document.querySelector（“#Lname”）； const msg=document.querySelector（'.msg'）； MyForm.addEventListener（“提交”，提交时）；提交函数（e）{ e、预防默认值（）；如果（Fname.value

const MyForm=document.querySelector（“#form”）；
const Fname=document.querySelector（“#Fname”）；
const Lname=document.querySelector（“#Lname”）；
const msg=document.querySelector（'.msg'）；
MyForm.addEventListener（“提交”，提交时）；
提交函数（e）{
e、 预防默认值（）；
如果（Fname.value==''| Lname.value==''）{
msg.innerHTML='两个字段都必须填写。'
设置超时（fadeaway，2000）；
函数fadeway（）{
msg.remove（）；
}
}
否则{
window.localStorage.setItem（'fname'，fname.value）；
window.localStorage.setItem（'lname'，lname.value）；
Fname.value=''；
Lname.value=''；
}
}


文件
名字：



姓氏：

设置localStorage值时，将重置以前的任何值。因此，您需要获取变量中的前一个值，然后将新值附加到该变量中。最后，通过该变量更新localStorage值

var firstName = window.localStorage.getItem('fname') || '';
firstName += Fname.value;

var lastName = window.localStorage.getItem('lname') || '';
lastName += Lname.value;

window.localStorage.setItem('fname', firstName);
window.localStorage.setItem('lname', lastName);

根据密钥设置本地存储器中的数据将始终覆盖以前的值。在您的场景中，我建议您只需从localstorage读取值，并附加新值，然后再次将新值设置为localstorage

范例


名字：



姓氏：




const MyForm=document.querySelector（“#form”）；
const Fname=document.querySelector（“#Fname”）；
const Lname=document.querySelector（“#Lname”）；
const msg=document.querySelector（'.msg'）；
MyForm.addEventListener（“提交”，提交时）；
提交函数（e）{
e、 预防默认值（）；
如果（Fname.value==''| Lname.value==''）{
msg.innerHTML='两个字段都必须填写。'
设置超时（fadeaway，2000）；
函数fadeway（）{
msg.remove（）；
}
}
否则{
const currentFName=window.localStorage.getItem（'fname'）；
const currentLName=window.localStorage.getItem（'lname'）；
window.localStorage.setItem（'fname'，`${currentFName}；${fname.value}`）；
window.localStorage.setItem（'lname'，`${currentLName}；${lname.value}`）；
Fname.value=''；
Lname.value=''；
}
}

以上答案是正确的。您可以在单独的助手函数（storeOrAppendData）中编写此逻辑，并调用该函数来存储或追加它

<!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>
    <div class="form-div">
        <form id="form">
            <label>First name:</label><br>
            <input type="text" id="fname"><br>
            <label>Last name:</label><br>
            <input type="text" id="lname"><br><br>
            <input type="submit" value="Submit" class="submit">
            <div class="msg"></div>
            <div class="user">
            </div>
        </form>
    </div>
    <script>
        const MyForm = document.querySelector('#form');
        const Fname = document.querySelector('#fname');
        const Lname = document.querySelector('#lname');
        const msg = document.querySelector('.msg');

        MyForm.addEventListener('submit', OnSubmit);

        function storeOrAppendData(key, value) {
            var temp = window.localStorage.getItem(key);
            if (temp) {
                temp += value;
            } else {
                temp = value;
            }
            window.localStorage.setItem(key, temp);
        }

        function OnSubmit(e) {
            e.preventDefault();

            if (Fname.value === '' || Lname.value === '') {
                msg.innerHTML = 'Both fields are required to fill.'
                setTimeout(fadeaway, 2000);
                function fadeaway() {
                    msg.remove();
                }
            }
            else {
                storeOrAppendData('fname', Fname.value);
                storeOrAppendData('lname', Lname.value);
                Fname.value = '';
                Lname.value = '';
            }

        }
    </script>
</body>

</html>


文件
名字：



姓氏：




const MyForm=document.querySelector（“#form”）；
const Fname=document.querySelector（“#Fname”）；
const Lname=document.querySelector（“#Lname”）；
const msg=document.querySelector（'.msg'）；
MyForm.addEventListener（“提交”，提交时）；
函数库或AppendData（键、值）{
var temp=window.localStorage.getItem（键）；
如果（临时）{
温度+=数值；
}否则{
温度=值；
}
window.localStorage.setItem（key，temp）；
}
提交函数（e）{
e、 预防默认值（）；
如果（Fname.value==''| Lname.value==''）{
msg.innerHTML='两个字段都必须填写。'
设置超时（fadeaway，2000）；
函数fadeway（）{
msg.remove（）；
}
}
否则{
storeOrAppendData（'fname'，fname.value）；
storeOrAppendData（'lname'，lname.value）；
Fname.value=''；
Lname.value=''；
}
}

你能给我解释一下吗。