Javascript 如何使用JSES6和jQuery将特定数据从本地存储加载到新页面？

我正在使用Javascript ES6和jQuery为虚构的侦探开发一个简单的webapp

主页（index.html）显示存储在localStorage中的默认案例。为此，我制作了一个脚本文件（cases.js），其中包含一个defaultCaseList对象文本，以及一个index.js脚本文件，其中包含一个加载和显示案例的函数，并且运行良好

主页上的每个案例都有一个“打开”按钮，当按下该按钮时，该按钮将在另一个页面（single case page.html）上显示该特定案例。现在，这就是我被卡住的地方。按下“打开”按钮时，如何将特定情况下的数据从本地存储加载到另一个html页面？这需要哪些函数和脚本文件？如何在singe case页面中为此设置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>
    `);
}
}`

---

因此，假设您的两个HTML页面共享同一个域，它们共享相同的本地存储，并且可以访问您的默认设置。知道了这一点，您需要传递的只是您单击的项目的ID

大概是这样的：

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

您可以使用jQuery提取查询字符串参数，如下所示：

然后，您可以在案例列表中筛选所需的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);

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