0

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

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

2 回答 2

1

这是一个小提琴：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();
于 2013-05-23T17:41:52.493 回答
1

我很确定在使用 setItem 时，您需要使用 (key, value) 对来设置项目。

请参阅此页面作为参考：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 的立即调用（脚本的最后一行）。

于 2013-05-23T17:48:11.210 回答