Unable to append local storage data across the domain

Question

I have a massive problem, with little time to resolve it. I am creating my first mobile app for property search as a university project (its not based on real properties) I tried using different keys it does not work, Im not getting the basics. Basically I have a Jquery mobile app with many external pages which have details for a property, these pages have the same id but on different documents, When a user clicks the button to save, I want the title and the url of the page to be saved in local storage and to be retrieved by a third page called my favorites. The problem I am having is that when I go on each page and click save, it overrides what was already in local storage and it seems like each page has its own storage and as a result my favorites page always has only one favorite (the latest one), rather than a favorite list appending every time I click save. Here is my code:

<div data-role="header" id="samplePlacePage_hd">
    <h4 id="hutRef">add#redHut456</h4>
</div>

<div data-role="main" id="samplePlacePage_cont">

    <div id="image">
        <a href="#"><img src="images/redhut.jpeg" height="200px" width="100%" alt="Hut"></a>
    </div>

    <div id="place_title">
        <p id="hutHeading">Stunning Red Hut in Central Red Beach</p>
    </div>
    <div>
        <h4 style="float: left;">Rent: $2950pw</h4>
        <h4 style="float: right;">Deposit: 5500</h4>
    </div>

(Same code on both pages) This was the function I had in my script file:

$(document).on("pagecreate",function (argument) {

var favoritesPlaces = [];
var heading = document.getElementById('hutHeading').innerText;
var ref = document.getElementById('hutRef').innerText;
var refLink = ref.replace("add#","");

document.getElementById('hutFav').onclick = function () {
    var newFav = {
        title: heading,
        link: refLink
    };
    favoritesPlaces.push(newFav);
    console.log(favoritesPlaces);
    localStorage.setItem("favorites",JSON.stringify(favoritesPlaces));
}

})

Please help

Thanks

Answer 1

Two additional considerations for you: checking the favorite has not been added already, and allowing the user to have multiple tabs open on pages from your site - adding one page as a favorite should not interfere with adding a different page as a favorite. And not to forget, if the local storage item does not exist create a new one :)

Basically I suggest retrieving local storage, checking for duplicates, updating and saving back to local storage all occur in a single click handler, E.G. by rearranging your code and adding a few lines:

$(document).on("pagecreate",function () {
    document.getElementById('hutFav').onclick = function () {

        var favoritesPlaces = localStorage.getItem("favorites");
        var heading = document.getElementById('hutHeading').innerText;
        var ref = document.getElementById('hutRef').innerText;
        var refLink = ref.replace("add#","");
        var newFav = {
            title: heading,
            link: refLink
        };

        favoritesPlaces = favoritesPlaces || '[]';    // string
        favoritesPlaces = JSON.parse(favoritesPlaces); // array
        if( !favoritesPlaces.some( fave => fave.link === refLink)) {
            favoritesPlaces.push( newFav)
            console.log(favoritesPlaces);
            localStorage.setItem("favorites",JSON.stringify(favoritesPlaces));
        }
        else {
           console.log("already a favorite");
        }
    }
})

(tested)

Note that clearing localStorage on any page clears it for all pages across a site. Once cleared, its cleared on all pages, there are no more favorites, and any page can be added again without being a duplicate. If a "remove this page from favorites" button is needed, a new function needs to be written to do it.