Javascript HTML5本地存储，刷新时显示保存的日期_Javascript_Html_Local Storage

Javascript HTML5本地存储，刷新时显示保存的日期

javascript html

Javascript HTML5本地存储，刷新时显示保存的日期,javascript,html,local-storage,Javascript,Html,Local Storage,我目前正在制作一个web应用程序，用户可以在其中输入足球比赛的分数预测。我已经设法让用户输入分数，分数预测显示在屏幕上，用户也可以删除数据，如果他们想。但是，在刷新页面时，数据不在那里，我希望它保持在那里有人能推荐我怎么做吗谢谢，这是我的Javascript代码 var timestamp=Date.now(); function doFirst(){ var button = document.getElementById("button"); button.a

我目前正在制作一个web应用程序，用户可以在其中输入足球比赛的分数预测。我已经设法让用户输入分数，分数预测显示在屏幕上，用户也可以删除数据，如果他们想。但是，在刷新页面时，数据不在那里，我希望它保持在那里

有人能推荐我怎么做吗

谢谢，这是我的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);

var timestamp=Date.now（）；
函数doFirst（）{
var button=document.getElementById（“按钮”）；
按钮。addEventListener（“单击”，保存内容，错误）；
}
函数saveStuff（）{
var one=document.getElementById（“one”）.value；
var two=document.getElementById（“two”）.value；
setItem（“一”+时间戳，一+”，“+2”）；
显示（）；
document.getElementById（“一”）.value=“”；
document.getElementById（“两个”）.value=“”；
}
函数显示（）{
var section2=document.getElementById（“section2”）；
section2.innerHTML=document.getElementById（“一”）.value+“-”+document.getElementById（“二”）.value+“
”；
}
函数deleteKey（）{
document.getElementById（“Section2”）.innerHTML=“”；
localStorage.removietem（localStorage.key（localStorage.length-1））；
}
函数clearAll（）{
localStorage.clear（）；
document.getElementById（“clear”）.style=“可见性：隐藏”；
}
window.addEventListener（“加载”，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>


英超网站
英超网站

家
团队
额外费用

第一场比赛的比分是多少？
（关键）一：
（价值）二



存储的信息应该放在这里
埃利奥特·哈里森2014

我建议将数据存储在数组/映射对象中，然后反序列化为json（字符串）数据，因为本地存储只允许存储字符串数据（为此使用json.stringify（）

例如，在json数据中需要以下对象：{createdTime、scoreResult、gameId作为外键}

假设您在“键”文本字段中输入“Game1”，第一队输入1，第二队输入2，然后按“保存”：

您的“显示”功能可以是这样的：

function display() {
    var text = "";
    for (var i=0, length=arrResultList.length; i<length; i++) {
        text = text + arrResultList[i].score + "<br />";
    }
    section2.innerHTML = text;
}

如果要删除数组中的某些项，可以通过其时间戳（例如）来删除它们，但这应该很容易，我相信是这样的：）

我只发布基本资料，但如果您需要更多说明/信息，请发电子邮件给我

如果希望进一步开发应用程序并需要更复杂的结构，您可能还需要检查Web SQL存储（而不是本地存储）

此外，如果您想获得双向数据绑定支持和其他高级功能，请查看AngularJS或Knockout。

在刷新时使用

localStorage

填充字段。支持所有HTML/HTML5输入字段，包括日期字段！您没有从代码中的

localStorage

检索任何内容就是原因。你需要使用

localStorage.getItem（key）

，但是你让这变得很困难，因为你在时间戳下保存数据，除非你知道这是什么，否则你会让检索变得更困难。安迪，第一个想法是删除时间戳，然后我应该从那里开始？

function display() {
    var text = "";
    for (var i=0, length=arrResultList.length; i<length; i++) {
        text = text + arrResultList[i].score + "<br />";
    }
    section2.innerHTML = text;
}

function deleteAll() {
    arrResultList = [];
    window.localstorage.setItem("FootballScoreData", JSON.stringify(arrResultList));
}