How do I load specific data from local storage to a new page using JS ES6 and jQuery?

Question

I am developing a simple webapp for a fictional detective using Javascript ES6 and jQuery.

The main page (index.html) shows default cases that are stored in localStorage. For this, I made a script file (cases.js) containing a defaultCaseList object literal, and an index.js script-file containing a function to load and display the cases, and it works fine.

Every case on the main page has an "OPEN" button which is supposed to display that specific case on another page (single-case-page.html) when pressed on. Now, this is where I got stuck. How do I load data for that specific case from local storage into another html page when pressing on the "open" button? Which functions and script-files do I need for this? How do I set up the HTML in the singe-case-page for this?

This is the code for the function that loads and displays default cases on the main page:

`$(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>
    `);
}
}`

This is the code from the script-file containing a default case list:

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

score 0 · Answer 1 · answered Jan 29 '20 at 13:02

So assuming that both your HTML pages share the same domain, they share the same localStorage and have access to your defaults. Knowing that, all you need to pass along, is the ID for the item you clicked on.

Something like this:

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

You can pluck out the query string parameter using jQuery like so: jquery get querystring from URL

Then you can just filter through your list of cases for the id you want:

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

How do I load specific data from local storage to a new page using JS ES6 and jQuery?

1 Answers1