如何使用 JS ES6 和 jQuery 將特定數據從本地存儲加載到新頁面？

Question

我正在使用 Javascript ES6 和 jQuery 為虛構偵探開發一個簡單的 web 應用程序。

主頁 (index.html) 顯示存儲在 localStorage 中的默認情況。 為此，我制作了一個包含 defaultCaseList 對象文字的腳本文件 (cases.js)，以及一個包含加載和顯示案例的函數的 index.js 腳本文件，它工作正常。

主頁上的每個案例都有一個“打開”按鈕，當按下該按鈕時，應該會在另一個頁面 (single-case-page.html) 上顯示該特定案例。 現在，這就是我被卡住的地方。 當按下“打開”按鈕時，如何將特定情況下的數據從本地存儲加載到另一個 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 並可以訪問您的默認值。 知道了，您需要傳遞的只是您單擊的項目的 ID。

像這樣的東西：

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

您可以像這樣使用 jQuery 提取查詢字符串參數： jquery get querystring from URL

然后你可以過濾你想要的 id 的案例列表：

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);