我目前正在制作一个网络应用程序，用户可以在其中输入足球比赛的得分预测。我设法让用户输入分数，分数预测出现在屏幕上，用户也可以根据需要删除数据。但是，刷新页面后，看不到数据，我希望它保留在那里。
有人可以建议我如何做到这一点吗？
谢谢，这是我的 Javascript 代码。
var timestamp=Date.now();
function doFirst(){
var button = document.getElementById("button");
button.addEventListener("click", saveStuff, false);
}
function saveStuff(){
var one = document.getElementById("one").value;
var two = document.getElementById("two").value;
localStorage.setItem("one"+timestamp,one+","+two);
display();
document.getElementById("one").value = "";
document.getElementById("two").value = "";
}
function display(){
var section2 = document.getElementById("sectiontwo");
section2.innerHTML = document.getElementById("one").value+" - "+document.getElementById("two").value+"<br />";
}
function deleteKey(){
document.getElementById("sectiontwo").innerHTML="";
localStorage.removeItem(localStorage.key(localStorage.length-1));
}
function clearAll(){
localStorage.clear();
document.getElementById("clear").style="visibility:hidden";
}
window.addEventListener("load", doFirst, false);
这是我的 HTML 代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Premier League Site</title>
<link rel="stylesheet" href="style.css"/>
<script src="elliot.js"></script>
</head>
<body>
<script src="elliot.js"></script>
<div id="wrapper">
<header id="header">
<h1>Premier League Site</h1>
</header>
<nav id ="Menu_Bar">
<ul>
<li>Home</li>
<li>Teams</li>
<li>Extras</li>
</ul>
</nav>
<section id="sectionone">
What is the score for Game one?
<form>
<p>(key) One: <input type="number" id="one"></p>
<p>(value) Two <input type="number" id="two"></p>
<p><input type="button" id="button" value="Save"></p>
<p><input type="button" id="dbutton" value="Delete" onclick="deleteKey()"></p>
<p><input type="button" id="clear" value="Clear All" onclick="clearAll();" ></p>
</form>
</section>
<section id="sectiontwo">
Stored Info should go here
</section>
<footer id="footer">
Elliot Harrison 2014
</footer>
</div>
</body>
</html>
最佳答案
我建议将数据存储在数组/映射对象中，然后反序列化为 json(字符串)数据，因为本地存储确实允许仅存储字符串数据(为此目的使用 JSON.stringify() )。
例如，您的 json 数据中需要以下对象:{createdTime、scoreResult、gameId 作为外键}。
假设您在“key”文本字段中输入“Game1”，1 代表第一队，2 代表第二队，然后按“保存”:
var arrResultList = JSON.parse(window.localstorage.getItem("FootballScoreData")); //global variable
if(typeof arrResultList === 'undefined' || arrResultList === null) {
arrResultList = [];
}
function save() {
var gameId = document.getElementById("gameId").value;
var firstScore = document.getElementById("firstTeam").value;
var secondScore = document.getElementById("secondTeam").value;
arrResultList.push(new ScoreData(gameId, firstScore, secondScore));
window.localstorage.setItem("FootballScoreData", JSON.stringify(arrResultList));
}
function ScoreData(gameId, firstScore, secondScore) {
var _self = this;
_self.createdTime = Date.now();
_self.score = firstScore + '-' + secondScore;
_self.gameId = gameId;
}
你的“显示”功能可能是这样的:
function display() {
var text = "";
for (var i=0, length=arrResultList.length; i<length; i++) {
text = text + arrResultList[i].score + "<br />";
}
section2.innerHTML = text;
}
还有你的deleteAll函数:
function deleteAll() {
arrResultList = [];
window.localstorage.setItem("FootballScoreData", JSON.stringify(arrResultList));
}
如果你想删除数组中的某些项目，你可以通过它的时间戳来删除它们，但这应该很容易，我相信是这样:)
我只发布基本内容，但如果您需要更多说明/信息，请给我发电子邮件。
您可能还想检查 Web SQL 存储(而不是本地存储)http://dev.w3.org/html5/webdatabase/ ，如果你想进一步开发应用程序并且需要更复杂的结构。
此外，如果您想要双向数据绑定(bind)支持和其他奇特的东西，请查看 AngularJS 或 Knockout。
关于javascript - HTML5 本地存储，刷新时显示保存日期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21049709/