时间戳

首页 > 解决方案 > 不知道如何使用本地存储和 jquery 解决这个问题

javascript - 不知道如何使用本地存储和 jquery 解决这个问题

问题描述

我正在创建一个 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"
};

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

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

标签： javascriptjqueryjsonlocal-storageobject-literal

解决方案

值作为字符串存储在 localStorage 中。您需要使用JSON.parse获取数组

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

推荐阅读