如何分离本地存储值并在HTML中以垂直顺序显示它们

我有一个本地存储值，当我在HTML页面中显示它们时，它们如下所示：

我希望它们以垂直顺序显示，如下所示：

代码：

//页面脚本
document.querySelector（“#record”）.innerHTML=localStorage.getItem（“历史”）
//原始数据
var val=data.id+'：'++'+data.message++'['+new Date（）.toutString（）+']'；
var callback=JSON.parse（localStorage.getItem（“历史”））| |[]；
回调推送（val）；
setItem（“history”，JSON.stringify（回调））

Chat50 |历史
聊天记录虽然你的问题不清楚。看起来您希望以更像JSON数据的方式显示
localstorage
项，而不是一行。使用
pre
标记来实现这一点。如果你想在不同的div中显示项目，那么你必须通过一个循环来添加你的内容

HTML:

这可能对你有帮助


const string=localStorage.getItem（'history'）；
const array=JSON.parse（字符串）；
const ul=document.createElement（'ul'）；
让数据=“”；
for（设i=0；idocument.getElementById（'root'）.appendChild（ul）尝试在脚本中连接
'
'
，如：

document.querySelector('#record').innerHTML =  localStorage.getItem("history") + '<br/>';

document.querySelector（“#record”）.innerHTML=localStorage.getItem（“历史”）+”
；
如果要在HTML中将其显示为聊天日志，则必须迭代数组中的每个元素，然后将其呈现给DOM。您可以使用
.classList.add（'myClassName'）
添加CSS类


const data=[“开发人员：已连接[Wed，2020年8月26日05:05:07 GMT]，“开发人员：好的，婴儿潮一代[Wed，2020年8月26日05:05:44 GMT]”]
const message_list=document.querySelector（“#messages”）
data.forEach（消息=>{
让message_section=document.createElement（'div'））
让message_time=document.createElement（'span'）；
让第_行中断=document.createElement（'br'）；
让message_data=document.createElement（'span'））
message_data.textContent=message.split（'['）[0]
message_time.textContent=message.split（'['）[1]。替换（']'，''）
message_节.appendChild（message_数据）；
消息\u节.appendChild（换行符）
消息部分。追加子项（消息时间）；
message_list.appendChild（message_部分）
})；

我的聊天记录
是字符串吗？在此处张贴您的代码仍然是水平的，但使用滚动条您的问题不清楚。请添加从
localstorage
获得的正确数据以及您想要的输出。不要在问题中添加图片。
var data = localStorage.getItem("history");

document.getElementById("formattedJson").textContent = JSON.stringify(data, undefined, 2);

document.querySelector('#record').innerHTML =  localStorage.getItem("history") + '<br/>';