Как загрузить указанные c данные из локального хранилища на новую страницу, используя JS ES6 и jQuery?

Question

Я разрабатываю простое веб-приложение для вымышленного детектива, используя Javascript ES6 и jQuery.

На главной странице (индекс. html) показаны случаи по умолчанию, которые хранятся в localStorage. Для этого я создал файл сценария (case. js), содержащий литерал объекта defaultCaseList, и файл сценария index. js, содержащий функцию для загрузки и отображения наблюдений, и он отлично работает.

В каждом регистре на главной странице есть кнопка «ОТКРЫТЬ», которая должна отображать этот конкретный регистр c на другой странице (в одном случае). html) при нажатии. Вот где я застрял. Как загрузить данные для этого конкретного случая c из локального хранилища в другую страницу html при нажатии кнопки «Открыть»? Какие функции и файлы сценариев мне нужны для этого? Как мне настроить HTML на странице с одним регистром для этого?

Это код функции, которая загружает и отображает регистры по умолчанию на главной странице:

`$(document).ready(() => {
getCaseList();
});

function getCaseList() {
window.caseList = JSON.parse(localStorage.getItem("caseList"));
$("#main-container").empty();
console.log(caseList);

for (let key in window.caseList) {
    var cases = caseList[key];
    $("#main-container").append(`
        <div class="box">
            <h3>${cases.title}</h3>
            <img src="${cases.imageUrl}">
            <p>Kategori: ${cases.kategori}</p>
            <p>Etterforsker: ${cases.etterforsker}</p>
            <a href="#" class="box-btn">Open</a>
        </div>
    `);
}
}`

Это код из файла скрипта, содержащего список дел по умолчанию:

`var defaultCaseList = [
{
    id: 1,
    title: "Operasjon RICO",
    kategori: "Organisert brottslighet",
    etterforsker: "Beck",
    imageUrl: "../images/case-file-pic.jpg"
},
{
    id: 2,
    title: "Operasjon Blåval",
    kategori: "Organisert brottslighet",
    etterforsker: "Wallander",
    imageUrl: "../images/case-file-pic.jpg"
},
{
    id: 3,
    title: "Elena",
    kategori: "Spionasje",
    etterforsker: "Veum",
    imageUrl: "../images/case-file-pic.jpg"
},
{
    id: 4,
    title: "Anonymous angriper infrastruktur ",
    kategori: "Cyber-trusler, Rikets sikkerhet", 
    etterforsker: "Inspector Gadget",
    imageUrl: "../images/case-file-pic.jpg"
},
{
    id: 5,
    title: "Test Titel 5",
    kategori: "Test kategori 5",
    etterforsker: "John McLane",
    imageUrl: "../images/case-file-pic.jpg"
},
{
    id: 6,
    title: "Test Titel 6",
    kategori: "Test kategori 6",
    etterforsker: "James Bond",
    imageUrl: "../images/case-file-pic.jpg"
},
{
    id: 7,
    title: "Test Titel 7",
    kategori: "Test kategori 7",
    etterforsker: "Lincoln Rhymes",
    imageUrl: "../images/case-file-pic.jpg"
},
{
    id: 8,
    title: "Test Titel 8",
    kategori: "Test kategori 8",
    etterforsker: "Rick Ross",
    imageUrl: "../images/case-file-pic.jpg"
},
{
    id: 9,
    title: "Test Titel 9",
    kategori: "Test kategori 9",
    etterforsker: "Sherlock Holmes",
    imageUrl: "../images/case-file-pic.jpg"
},
{
    id: 10,
    title: "Test Titel 10",
    kategori: "Test kategori 10",
    etterforsker: "Barnaby Jones",
    imageUrl: "../images/case-file-pic.jpg"
}
];




if (!localStorage.getItem("caseList")) {
localStorage.setItem("caseList", JSON.stringify(defaultCaseList));
}`

Answer 1

Таким образом, при условии, что обе ваши HTML страницы совместно используют один и тот же домен, они используют один и тот же localStorage и имеют доступ к вашим настройкам по умолчанию. Зная это, все, что вам нужно передать, это идентификатор элемента, на который вы щелкнули.

Примерно так:

http://origin.com/single-case-page.html?id=1234

Вы можете извлечь параметр строки запроса, используя jQuery, например, так: jquery получить строку запроса с URL

Затем вы можете просто отфильтровать список дел по нужному идентификатору:

const id = getQueryStringId(); // You'll need to write this function. also don't forget to convert to Number
const cases = JSON.parse(localStorage.getItem("caseList"));
const case = cases.find(c => c.id === id);