HTML5本地存儲，刷新時顯示保存的日期

Question

我目前正在制作一個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);

這是我的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作為外鍵}。

假設您在“鍵”文本字段中輸入“ 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 個解決方案

解決方案1
1 2014-03-02 23:30:14

HTML5本地存儲，刷新時顯示保存的日期

問題描述

1 個解決方案

解決方案1 1 2014-03-02 23:30:14

解決方案1
1 2014-03-02 23:30:14