Question

我将用户条目存储到本地存储中。然后将该信息作为单个项目存储在列表中。这一切都很好，但显示的键看起来非常难看，我想知道如何改善这一点。

文本显示为{“条目”：“在公园跑步”....如何让这个看起来更好看，例如，条目：在公园跑...我可以提供HTML如果需要的。

Answer 1

假设你在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>

Answer 2

我只用HTML和JS做过。对于我使用Template literals的变量。

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

HTML：更好的关键项目格式

2 个答案: