Javascript 如何在创建时以html格式显示localstorage中的数据

我正在尝试显示本地存储中的所有记录。 我目前只能在创建记录时临时显示记录，但一旦刷新页面，记录就会消失

let tuning=[]；
//示例{id:1592304983049，标题：'Deadpool'，年份：2015}
常量添加调整=（ev）=>{
ev.preventDefault（）；//停止表单提交
让调整={
名称：document.getElementById（'name'）。值，
注1:document.getElementById（'note1'）。值，
注2:document.getElementById（'note2'）。值，
注3:document.getElementById（'note3'）。值，
注4:document.getElementById（'note4'）。值，
注5:document.getElementById（'note5'）。值，
注6:document.getElementById（'note6'）。值
}
调谐。推（调谐）；
document.forms[0].reset（）；
//为下一个条目清除表单
//document.querySelector（'form'）.reset（）；
//显示数据
console.warn（'added'{
调弦
});
let pre=document.querySelector（'#msg pre'）；
pre.textContent='\n'+JSON.stringify（调谐，'\t'，2）；
//保存到本地存储
setItem（'MyTuningList'，JSON.stringify（tunings））；
}
document.addEventListener（'DOMContentLoaded'，（）=>{
document.getElementById（'btn'）。addEventListener（'click'，addTuning）；
});

这里在创建记录时显示数据，但是我想获取本地存储中的每个记录并将其显示在html页面上

//显示数据
warn（'added'，{tuning}）；
let pre=document.querySelector（'#msg pre'）；
pre.textContent='\n'+JSON.stringify（调谐，'\t'，2）；

您需要解析数据以获得正确的格式

此示例依赖于名为

tunings的存储项的存在

  const data = localStorage.getItem("tunings"); // Store the localstorage data in variable.

  // Set it to an empty array incase the storage is empty.
  if (!tunings || !tunings.length) {
    tunings = [];
  } else {
    tunings = JSON.parse(data); // Parse the data.
  }

  console.log(tunings); // Read the data for example.

在发布的代码中没有从本地存储中获取的字符串；代码所做的只是存储数组。在尝试解析
数据之前，最好先检查
数据是否为
null
，以防止出现异常。