Question

我需要通过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>

Answer 1

工作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'];
}

Answer 2

以下内容取自W3schools

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

您的朋友是对的，localStorage应该与HTML5一起使用。您确定您的网站使用HTML5（）

正常运行

localStorage对象存储没有过期日期的数据。当浏览器关闭时，数据不会被删除，并且可以在第二天，一周或一年中使用。

如果没有关于错误的更多信息，这是我真正推荐的。

编辑：从评论中看，它无法在Chrome中运行 - 您确定Chrome最近已更新过吗？

Answer 3

您的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"]

......甚至没有意义。

Answer 4

        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();

Test Demo

使用html5进行本地存储

4 个答案: