Javascript 通过本地存储添加值_Javascript_Storage_Local

Javascript 通过本地存储添加值

javascript

Javascript 通过本地存储添加值,javascript,storage,local,Javascript,Storage,Local,我试图创建一个页面，用户可以将数据输入到四个不同文本框中的四个不同值中，这些值可以使用本地存储进行存储，然后当用户刷新页面或在新选项卡中打开页面时，以前输入的值仍然存在。任何关于如何做到这一点的建议都将非常棒！以下是我目前拥有的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Storing Data</titl

我试图创建一个页面，用户可以将数据输入到四个不同文本框中的四个不同值中，这些值可以使用本地存储进行存储，然后当用户刷新页面或在新选项卡中打开页面时，以前输入的值仍然存在。任何关于如何做到这一点的建议都将非常棒！以下是我目前拥有的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <title>Storing Data</title>
    <meta name="description" content="" />
    <meta name="author" content="Alan Sylvestre" />

    <style>
        h1 {
            background-color: #000000;
            color: #C00000;
            padding: 10 px;
            padding: 10 px;
            text-align: center;
        }

    </style>

    <script>
        function storageValue() {
            var uno = document.getElementById("storage1");
            var duck = uno.value
            var dos = document.getElementById("storage2");
            var duckie = dos.value
            var tres = document.getElementById("storage3");
            var rubberDuck = tres.value
            var quatro = document.getElementById("storage4");
            var rubberDuckie = quatro.value
            alert("Your stored values are: " + duck + "," + duckie + "," + rubberDuck + "," + rubberDuckie);
            localStorage.setItem(duck, duckie, rubberDuck, rubberDuckie);
            checkLocalStorage();
        }

        function checkLocalStorage() {
            var div = document.getElementById("storageDiv");
            div.innerHTML = localStorage["duck", "duckie", "rubberDuck", "rubberDuckie"];
        }

    </script>
</head>

<body align="center" style="background-color:red;">
    <div>
        <header>
            <h1>Local Storage</h1>
        </header>
        <input type="text" id="storage1" size="40" placeholder="Please enter a value">
        <input type="text" id="storage2" size="40" placeholder="Please enter a value">
        <input type="text" id="storage3" size="40" placeholder="Please enter a value">
        <input type="text" id="storage4" size="40" placeholder="Please enter a value">
        <br>
        <br>
        <input type="button" id="addValue" value="Store Input Values" onclick='storageValue();'>
        <div id="storageDiv"></div>
        <nav>
            <p>
                <a href="/">Home</a>
            </p>
            <p>
                <a href="/contact">Contact</a>
            </p>
        </nav>

        <div>

        </div>

        <footer>
            <p>
                &copy; Copyright  by Alan Sylvestre
            </p>
        </footer>
    </div>
</body>
</html>


存储数据
h1{
背景色：#000000；
颜色：#C00000；
填充：10像素；
填充：10像素；
文本对齐：居中；
}
函数storageValue（）{
var uno=document.getElementById（“storage1”）；
var duck=uno.value
var dos=document.getElementById（“storage2”）；
var duckie=dos.value
var tres=document.getElementById（“storage3”）；
var rubberDuck=树值
var quatro=document.getElementById（“storage4”）；
var rubberDuckie=四分之一数值
警报（“您存储的值是：“+duck+”、“+duckie+”、“+rubberDuck+”、“+rubberDuckie”）；
localStorage.setItem（duck、duckie、rubberDuck、rubberDuckie）；
checkLocalStorage（）；
}
函数checkLocalStorage（）{
var div=document.getElementById（“storageDiv”）；
div.innerHTML=localStorage[“duck”、“duckie”、“rubberDuck”、“rubberDuckie”]；
}
本地存储









&抄袭；Alan Sylvestre版权所有

这里有一把小提琴：像数组一样使用localStorage来存储值：

localStorage[“duckie”]=duckie

另外，您不能这样做：

div.innerHTML=localStorage[“duck”、“duckie”、“rubberDuck”、“rubberDuckie”]
以下是更新的代码：
JS
我很确定在使用setItem时，您需要使用（键，值）对来设置项
请参阅本页作为参考：
试试这个：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<title>Storing Data</title>
<meta name="description" content="" />
<meta name="author" content="Alan Sylvestre" />

<style>
    h1 {
        background-color: #000000;
        color: #C00000;
        padding: 10 px;
        padding: 10 px;
        text-align: center;
    }

</style>


</head>

<body align="center" style="background-color:red;">
<div>
    <header>
        <h1>Local Storage</h1>
    </header>
    <input type="text" id="storage1" size="40" placeholder="Please enter a value">
    <input type="text" id="storage2" size="40" placeholder="Please enter a value">
    <input type="text" id="storage3" size="40" placeholder="Please enter a value">
    <input type="text" id="storage4" size="40" placeholder="Please enter a value">
    <br>
    <br>
    <input type="button" id="addValue" value="Store Input Values" onclick='storageValue();'>
    <div id="storageDiv"></div>
    <nav>
        <p>
            <a href="/">Home</a>
        </p>
        <p>
            <a href="/contact">Contact</a>
        </p>
    </nav>

    <div>

    </div>

    <footer>
        <p>
            &copy; Copyright  by Alan Sylvestre
        </p>
    </footer>
</div>
</body>
</html>

<script>
function storageValue() {
    var uno = document.getElementById("storage1");
    var duck = uno.value
    var dos = document.getElementById("storage2");
    var duckie = dos.value
    var tres = document.getElementById("storage3");
    var rubberDuck = tres.value
    var quatro = document.getElementById("storage4");
    var rubberDuckie = quatro.value
    alert("Your stored values are: " + duck + "," + duckie + "," + rubberDuck + "," + rubberDuckie);
    localStorage.setItem('duck', duck);
    localStorage.setItem('duckie', duckie);
    localStorage.setItem('rubberDuck', rubberDuck);
    localStorage.setItem('rubberDuckie', rubberDuckie);
    checkLocalStorage();
}

function checkLocalStorage() {
    var div = document.getElementById("storageDiv");
    div.innerHTML = localStorage["duck"] + localStorage["duckie"] + localStorage["rubberDuck"] + localStorage["rubberDuckie"];
}

checkLocalStorage();
</script>


存储数据
h1{
背景色：#000000；
颜色：#C00000；
填充：10像素；
填充：10像素；
文本对齐：居中；
}
本地存储









&抄袭；Alan Sylvestre版权所有

函数storageValue（）{
var uno=document.getElementById（“storage1”）；
var duck=uno.value
var dos=document.getElementById（“storage2”）；
var duckie=dos.value
var tres=document.getElementById（“storage3”）；
var rubberDuck=树值
var quatro=document.getElementById（“storage4”）；
var rubberDuckie=四分之一数值
警报（“您存储的值是：“+duck+”、“+duckie+”、“+rubberDuck+”、“+rubberDuckie”）；
setItem（'duck'，duck）；
setItem（'duckie'，duckie）；
localStorage.setItem（'ruberduck'，ruberduck）；
localStorage.setItem（'rubberDuckie'，rubberDuckie）；
checkLocalStorage（）；
}
函数checkLocalStorage（）{
var div=document.getElementById（“storageDiv”）；
div.innerHTML=localStorage[“duck”]+localStorage[“duckie”]+localStorage[“ruberduck”]+localStorage[“ruberduckie”]；
}
checkLocalStorage（）；

另外，我将脚本放在html下面，以便在html之后运行。我还添加了一个对checkLocalStorage（脚本的最后一行）的即时调用。
效果很好，但是我如何修改它，使存储的值在文本框中变小，而不是在文本框下变小？@AlanSylvestre对每个输入执行类似的操作：document.getElementById（“storage1”）.value=localStorage[“duck”]；作为旁注，我强烈建议您学习Jquery。如果我的回答回答了您的问题，请接受我的回答。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<title>Storing Data</title>
<meta name="description" content="" />
<meta name="author" content="Alan Sylvestre" />

<style>
    h1 {
        background-color: #000000;
        color: #C00000;
        padding: 10 px;
        padding: 10 px;
        text-align: center;
    }

</style>


</head>

<body align="center" style="background-color:red;">
<div>
    <header>
        <h1>Local Storage</h1>
    </header>
    <input type="text" id="storage1" size="40" placeholder="Please enter a value">
    <input type="text" id="storage2" size="40" placeholder="Please enter a value">
    <input type="text" id="storage3" size="40" placeholder="Please enter a value">
    <input type="text" id="storage4" size="40" placeholder="Please enter a value">
    <br>
    <br>
    <input type="button" id="addValue" value="Store Input Values" onclick='storageValue();'>
    <div id="storageDiv"></div>
    <nav>
        <p>
            <a href="/">Home</a>
        </p>
        <p>
            <a href="/contact">Contact</a>
        </p>
    </nav>

    <div>

    </div>

    <footer>
        <p>
            &copy; Copyright  by Alan Sylvestre
        </p>
    </footer>
</div>
</body>
</html>

<script>
function storageValue() {
    var uno = document.getElementById("storage1");
    var duck = uno.value
    var dos = document.getElementById("storage2");
    var duckie = dos.value
    var tres = document.getElementById("storage3");
    var rubberDuck = tres.value
    var quatro = document.getElementById("storage4");
    var rubberDuckie = quatro.value
    alert("Your stored values are: " + duck + "," + duckie + "," + rubberDuck + "," + rubberDuckie);
    localStorage.setItem('duck', duck);
    localStorage.setItem('duckie', duckie);
    localStorage.setItem('rubberDuck', rubberDuck);
    localStorage.setItem('rubberDuckie', rubberDuckie);
    checkLocalStorage();
}

function checkLocalStorage() {
    var div = document.getElementById("storageDiv");
    div.innerHTML = localStorage["duck"] + localStorage["duckie"] + localStorage["rubberDuck"] + localStorage["rubberDuckie"];
}

checkLocalStorage();
</script>