无法弄清楚如何使用本地存储和jQuery解决此问题

Question

我正在创建一个Web应用程序以创建，编辑，删除和查看案例。所有这些都必须存储在本地存储中，并且只允许使用JS和jQuery。

我的问题是如何单击一个已经创建的案例，以重定向到包含该案例更多信息的页面？我尝试过在线查找，但似乎没有任何意义。

这是“创建新案例”页面，它将案例推到另一个站点：

let caseList = [];

const submitBtn = document.getElementById("submit-btn");
const title = document.getElementById("title");
const desc = document.getElementById("desc");

const newCase = (e) => {
  e.preventDefault();
  let cases = {
    title: title.value,
    desc: desc.value,
    type: $("#type option:selected").text() + ".png",
    area: $("#area option:selected").text(),
  };

  caseList.push(cases);
  document.forms[0].reset();

  localStorage.setItem("caseList", JSON.stringify(caseList));
  alert("Sak opprettet");
  return true;
}

document.addEventListener("DOMContentLoaded", () => {
  submitBtn.addEventListener("click", newCase);
});

这是输出案件的站点。在这里，我想单击一个已经创建的案例，以在另一页上获得更多信息：

const mainContainerGrid = document.getElementById('main-container-grid');

mainContainerGrid.innerHTML = localStorage.length;
if (localStorage.length > 0) {
  let addCase1 = JSON.parse(localStorage.getItem("caseList"));

  let html = "";
  addCase1.forEach(case1 => {
    html += `<div class="case1">
      <img class="img" src="/images/${case1.type}" >
      <h1>${case1.title}</h1>
      <button class="show-more">Les mer</button>
    </div>`
  });
  mainContainerGrid.innerHTML = html;
} else {
  mainContainerGrid.innerHTML = "No cases created"
};

这是设置本地存储的方式：

Answer 1

值以字符串形式存储在localStorage中。您可能需要使用JSON.parse来获取数组

mainContainerGrid.innerHTML = JSON.parse(localStorage.getItem('caseList'))length;