Не могу понять, как решить эту проблему с помощью локального хранилища и jquery - PullRequest
Новая
       50

Не могу понять, как решить эту проблему с помощью локального хранилища и jquery

0 голосов
/ 06 ноября 2019

Я создаю веб-приложение для создания, редактирования, удаления и просмотра дел. Все это должно храниться в локальном хранилище, и мне разрешено использовать только 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"
};

Вот как настроено мое локальное хранилище:

Here's how my local storage is set up

1 Ответ

0 голосов
/ 06 ноября 2019

Значение сохраняется как строка в localStorage. Вам необходимо использовать JSON.parse, чтобы получить массив

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

...