本地存储使用html5

我需要存储用户通过html5在每个框中输入的值。当用户刷新页面时，它应该保留每个文本框中的值。我有一个朋友告诉我，这将工作，但它不是，我没有在控制台中得到任何错误。本地存储使用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>

来源

2013-05-26 Alan Joseph Sylvestre

是'storageValue（）'被称为？你是否已经完成了调试器？警报是否显示？ –

有什么错误？ – Alan

错误是当您刷新页面时，它不会将值存储在文本框中。表单会重置。 –

-1

下面是从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-26 06:13:32 gersande

我不确定它已被更新。我现在要检查一下。 –

请勿使用W3Schools –

您的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-26 06:32:35 jongo45

工作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-26 06:37:28 chrislondon

 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

来源

2015-07-14 05:52:59 Kamal

请修复您的代码格式并添加说明（您应该制作“检索数据”和您的其他评论实际评论）。 – royhowie

本地存储使用html5

回答

相关问题