1

我需要存储用户通过 html5 在每个框中输入的值。当用户刷新页面时，它应该保留每个文本框中的值。我有一个朋友告诉我这会起作用，但事实并非如此，而且我在控制台中没有收到任何错误。

<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 poodle = document.getElementById('storage1').value
    poodle.innerHTML = localStorage["duck"] 
    var cow = document.getElementById('storage2').value
    poodle.innerHTML = localStorage["duckie"]
    var dog = document.getElementById('storage3').value
    dog.innerHTML = localStorage["rubberDuck"]
    var cat = document.getElementById('storage4').value
    cat.innerHTML = localStorage["rubberDuckie"];
}

checkLocalStorage();

这是我拥有的 HTML：

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

4 回答 4

2

工作 JS 小提琴：http: //jsfiddle.net/9BN5r/

问题是您正在尝试设置输入字段的 innerHTML。您需要设置该值。将您的功能更改checkLocalStorage()为：

function checkLocalStorage() {
    var poodle = document.getElementById('storage1');
    poodle.value = localStorage['duck'];

    var cow = document.getElementById('storage2');
    cow.value = localStorage['duckie'];

    var dog = document.getElementById('storage3');
    dog.value = localStorage['rubberDuck'];

    var cat = document.getElementById('storage4');
    cat.value = localStorage['rubberDuckie'];
}
于 2013-05-26T06:37:28.100 回答
0

您的storageValue功能似乎还可以，但您的checkLocalStorage功能需要修复；

你需要一些更对称的东西：

localStorage.setItem('duck', document.getElementById("storage1").value);
...
document.getElementById("storage1").value = localStorage.getItem('duck');

最好使用一些代码来提供默认值和值检查等。

但你在你的checkLocalStorage功能中拥有的是：

var poodle = document.getElementById('storage1').value
poodle.innerHTML = localStorage["duck"]

...这甚至没有意义。

于 2013-05-26T06:32:35.617 回答
0

以下内容取自W3schools

if(typeof(Storage)!=="undefined")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }

您的朋友是对的， localStorage 应该与HTML5一起使用。您确定您的网站可以正常使用 HTML5 ()

localStorage 对象存储没有过期日期的数据。关闭浏览器时数据不会被删除，将在下一天、下周或下一年可用。

如果没有有关错误的更多信息，这就是我真正推荐的全部内容。

编辑：从评论来看，它在 Chrome 中不起作用 - 你确定 Chrome 最近已经更新了吗？

于 2013-05-26T06:13:32.713 回答
0 
        if(typeof(Storage) !== "undefined") {
        // working
    } else {
        // Not Support
    }
    Store Data

    //Syntax 
    localStorage.setItem(Key,Value);
    //By localStorage Object  Method

    localStorage.setItem('name','TEST');

    Retrieve Data
    var a = localStorage.getItem('name');
    alert(a); //Output : TEST


    Remove Data
    localStorage.removeItem('name');


    Remove All Data
    localStorage.clear();

测试演示

于 2015-07-14T05:52:59.653 回答