CODEWITHSUNDEEP
javascripthtmllocal-storage
Patrick Northcraft
Patrick Northcraft

Reputation: 23

HTML5 Local Storage Between Pages

So I am new to the HTML5/JS programming scene, but I am really trying to learn quickly... I am looking to build a site that functions like a Jeopardy game, with a home screen that has a table with categories and point values that, on click, will hyperlink to a question page. On the homepage I was looking to keep track of the points. I have a textbox there coded as:

<input type="number" id="SamTotalPoint" value="0" readonly="readonly"/>

On the question pages, I have placed buttons that would ideally add points to the home page using local storage. The button is coded as:

<input type="button" id="SamHist50" value="Team Sam" onclick="SamScoreKeeper(samPoint,50)"/>

Now I'm looking to connect the two. On an external JS, I tried to define the function as:

   function SamScoreKeeper(samPoint,pointsToAdd)
{
    window.localStorage.setItem("SamTotalPoint", "0");
    var SamOldScore = parseInt(window.localStorage.getItem("SamTotalPoint"));
    window.alert(samPoint);
    window.alert(pointsToAdd);
    samPoint = samPoint + pointsToAdd
    var SamNewScore = samPoint;
    var SamTotalv = SamOldScore + SamNewScore
    window.alert(samPoint);
    window.history.back();
    document.getElementById("SamTotalPoint").value; = SamTotalv;
}

I put the Which simply isn't working. I have spent a while trying to just research this and understand it more, but after about 6-7 hours total of fighting with it and watching a bunch of tutorials, I still simply can't get it. This page would just be run locally off of a flash drive, not actually hosted on a server, which is why I was hoping local storage could solve the problem rather than using PHP. The window alerts are just there so I could make sure the JS was doing the arithmetic. Can anybody help me with this? It would be most appreciated!

Upvotes: 2

Views: 3721

Answers (1)

Leo
Leo

Reputation: 13858

When localStorage is modified, a storage event will be fired on all other pages that share the storage. You just need to handle the event, and retrieve updated data. This also works for sessionStorage.

document.addEventListener('storage', function(e) {
    // don't forget to take a look at the parameter - event object
    // update your page here, good luck
}, false);

Upvotes: 3

Related Questions