HTML：更好的關鍵項目格式

我將用戶條目存儲在本地存儲中。這些信息將作爲單獨的項目存儲在列表中。這一切都很好，但顯示的鍵看起來很醜，我想知道如何改善這一點。HTML：更好的關鍵項目格式

文本顯示爲{「入口」：「在公園奔跑」 ......我怎樣才能讓這個更好看，比如，輸入：運行在公園.... 。如果需要，我可以提供html。

2017-05-01 George Brooks

所以你JSON存儲在localStorage的變種？ –

這些看起來非常像JSON對象。你有沒有嘗試解析它們，然後顯示一個預先寫好的HTML標記，整齊地放置這些屬性？ – DragShot

假設您在localStorage中存儲了JSON，請使用JSON.parse()解析localStorage項中的JSON，然後使用鍵和值對html進行格式化。

var json = JSON.parse('{"entry":"run at the park","exercise":"jogging"}'); 
 
// you'd probably do... 
 
// var json = JSON.parse(localStorage.getItem('whatever')); 
 

 
document.getElementById('list').innerHTML = '<li><strong>'+json.entry+':</strong> '+json.exercise+'</li>';

<ul id="list"></ul>

來源

2017-05-01 00:15:00

這幾乎是我想要的，謝謝你。 –

@GeorgeBrooks真棒，你打賭。 –

我只用HTML和JS做到了。對於我使用的變量Template literals。

<!DOCTYPE html> 
 
<html> 
 
\t <body> 
 
\t <p id="demo"></p> 
 
\t <script> 
 
\t \t \t let log = { 
 
\t \t \t "Entry": "run at the park", 
 
\t \t \t "Exercise": "jogging", 
 
\t \t \t "Date": "2017-05-03", 
 
\t \t \t "Start": `10:21am`, 
 
\t \t \t "End": `11:45pm`, 
 
\t \t \t "calories": `649` 
 
\t \t }; 
 
\t \t document.getElementById("demo").innerHTML = 
 
\t \t \t `Entry: ${log.Entry}<br> 
 
\t \t \t Exercise: ${log.Exercise}<br> 
 
\t \t \t Date: ${log.Date}<br> 
 
\t \t \t Start: ${log.Start}<br> 
 
\t \t \t End: ${log.End}<br> 
 
\t \t \t calories: ${log.calories}`; 
 
\t </script> 
 
</body> 
 
</html>

來源

2017-05-01 00:30:44 Tweakimp

HTML：更好的關鍵項目格式

回答

相關問題