通过本地存储添加值

Adding Values through local storage

本文关键字：添加 存储      更新时间：2023-09-26

我正在尝试制作一个页面，用户可以在四个不同的文本框中输入数据到四个不同的值中，这些值可以通过使用本地存储存储，然后当用户刷新页面或在新选项卡中打开它时，以前输入的值仍然存在。任何关于如何做到这一点的建议都会很棒!下面是我当前的代码:

<!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>

这里有一个小提琴:http://jsfiddle.net/howderek/T5PqU/

像数组一样使用localStorage来存储值:localStorage["duckie"] = duckie

同样，你不能这样做:div.innerHTML = localStorage["duck", "duckie", "rubberDuck", "rubberDuckie"];

下面是更新后的代码:

JS 

function storageValue() {
    var uno = document.getElementById("storage1");
    var duck = uno.value;
    localStorage["duck"] = duck;
    var dos = document.getElementById("storage2");
    var duckie = dos.value;
    localStorage["duckie"] = duckie;
    var tres = document.getElementById("storage3");
    var rubberDuck = tres.value;
    localStorage["rubberDuck"] = rubberDuck;
    var quatro = document.getElementById("storage4");
    var rubberDuckie = quatro.value;
    localStorage["rubberDuckie"] = rubberDuckie;
    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 = "The current values are: " + localStorage["duck"] + ", " + localStorage["duckie"]   + ", " +  localStorage["rubberDuckie"] + ", " +  localStorage["rubberDuckie"];
}
checkLocalStorage();

我很确定在使用setItem时，您需要使用(键，值)对来设置项。

参考此页:http://en.wikipedia.org/wiki/Web_storage#localStorage

试试这个:

<!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>

另外，我把脚本放在html下面，所以它在html之后运行。我还添加了对checkLocalStorage的立即调用(脚本的最后一行)。

相关文章：