使用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>
© Copyright by Alan Sylvestre
</p>
</footer>
</div>
</body>回答 4
Stack Overflow用户
发布于 2013-05-26 14:37:28
工作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'];
}Stack Overflow用户
发布于 2013-05-26 14:13:33
以下内容摘自W3schools
if(typeof(Storage)!=="undefined")
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}你的朋友是对的，localStorage应该和HTML5一起工作。您确定您的网站使用HTML5 ()时工作正常吗
localStorage对象存储没有过期日期的数据。当浏览器关闭时，数据不会被删除，并将在第二天、第二周或第二年可用。
如果没有更多关于错误的信息，这就是我真正能推荐的。
编辑:从评论来看，它在Chrome中不起作用-你确定Chrome最近更新了吗？
Stack Overflow用户
发布于 2013-05-26 14:32:36
您的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"] ..。这根本说不通。
https://stackoverflow.com/questions/16756656
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号