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

我目前一直在製作一個Web應用程序，用戶在其中輸入足球比賽的分數預測。我設法讓用戶輸入分數，分數預測出現在屏幕上，用戶也可以根據需要刪除數據。但是，在刷新頁面時，數據不會被看到，我希望它留在那裏。HTML5本地存儲，在刷新時顯示保存的日期

任何人都可以推薦我如何做到這一點？

謝謝，這是我的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>

來源

2014-01-10 user3170711

看看[Memoria.js]（https://github.com/Wildhoney/Memoria）刷新時使用'localStorage'填充字段。支持所有HTML/HTML5輸入字段，包括日期字段！ – Wildhoney

你沒有從代碼中的'localStorage'中檢索任何東西，這就是爲什麼。您需要使用'localStorage.getItem（key）'，但是由於您將數據保存在一個時間戳下，所以難以做到這一點，除非您知道這是什麼，否則您難以檢索。 – Andy

安迪，所以第一個想法是刪除時間戳，那麼我應該從那裏去？ – user3170711

我建議將數據存儲在一個陣列/地圖對象，然後反序列化到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。

來源

2014-03-02 23:30:14

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

回答

相關問題