Question

我目前正在制作一个网络应用，用户输入足球比赛的得分预测。我设法让用户输入分数，分数预测出现在屏幕上，用户也可以根据需要删除数据。但是，在刷新页面时，数据无法显示，我希望它留在那里。

有人可以推荐我这样做吗？

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

Answer 1

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

例如，您需要在json数据中使用以下对象：{createdTime，scoreResult，gameId as foreign 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/。

此外，如果您想要双向数据绑定支持和其他花哨的东西，请查看AngularJS或Knockout。

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

1 个答案: