leveraging the localStorage feature in a for-in iteration

Question

leveraging the localStorage feature in a for-in iteration

I am new to stackOverflow, although I have browsed the forums for help in the past. However, this time I couldn't find a solution to my current issue, so I decided to create an account and seek assistance.

The problem at hand is related to a workout application that consists of 3 pages - page 1: where the user selects gym equipment (bike, rower or x trainer) and difficulty level, page 2: displays specific workouts based on the selections, and page 3: the actual workout to be completed.

My goal is to store certain data in a localStorage object depending on the link clicked by the user. But, each time a link is clicked, only the last value in the 'for in' loop gets stored, regardless of the link. Here's a simplified explanation:

PAGE 1: User selects equipment and difficulty from dropdown menus

// Constructor function to create workout instances
function Workout(name, desc, loc, work_rest, res, intensity){
    // ... properties defined here
}

// Create Workouts for bike
var bike = {
    easy: [
        {workout_1: new Workout('Tabata', 'This is a tabata style workout', '../Workout_page_example/index.html', [20, 10,...])},
        {workout_2: new Workout('Classic_HIIT', 'This is a HIIT session', '../Workout_page_example/index.html',[60,30,...])},
        {workout_3: new Workout('Clock_Face', 'Beat the clock', '../Workout_page_example/index.html',[120, 60...])}
    ],
    int:[],
    adv:[]
};

btn.addEventListener('click', function() {
    if(equipment.value === "bike"){
        if(difficulty.value === "easy"){
            localStorage.setItem('get_info', JSON.stringify(bike.easy));
        } else if(difficulty.value === "int"){
            localStorage.setItem('get_info', JSON.stringify(bike.int));
        } else if(difficulty.value === "adv"){
            localStorage.setItem('get_info', JSON.stringify(bike.adv));
        }
        location.href = 'workouts/index.html';
});

This above page is working fine. Now, moving on to Page 2 which displays all available workouts based on the user's previous selections:

PAGE 2: Display workouts based on equipment and difficulty selected

window.addEventListener('load', function(){
    var getInfo = JSON.parse(localStorage.getItem('get_info'));
    var dom = document.getElementById('section');

    for(var key in getInfo){
        var obj = getInfo[key];
        
        for(var prop in obj){
            // display workout details
            dom.innerHTML += "<hr/><div class='workout_title'><h1>"+obj[prop].name.replace('_',' ')+"</h1></div>";
            dom.innerHTML += "<div class='workout_desc'><h4>"+obj[prop].desc+"</h4></div>";

            // store data in localStorage
            localStorage.setItem('work_rest', JSON.stringify(obj[prop].work_rest));
            localStorage.setItem('resistance', JSON.stringify(obj[prop].res));
            localStorage.setItem('intensity', JSON.stringify(obj[prop].intensity));

            dom.innerHTML += "<div class='workout_link'><a href='"+ obj[prop].loc +"' id='"+obj[prop].name+"'>START >></a></div>";
        }

    }

})

On clicking the links, only the data for the 'Clock Face' instance is being stored in the localStorage object. I understand why this is happening but unsure how to fix it.

javascript object local-storage for-in-loop

Answer 1

Answer №1

There is a flaw in your current approach where you are cycling through the 3 workouts and saving them without giving the user a chance to choose a workout. This causes the stored workout data to be constantly overwritten in each iteration, resulting in only the final workout being saved in the array. This means that all previous workouts have been replaced, creating a chain of overwriting that leads to only one workout being stored effectively.

Answer 2

There is a flaw in your current approach where you are cycling through the 3 workouts and saving them without giving the user a chance to choose a workout. This causes the stored workout data to be constantly overwritten in each iteration, resulting in only the final workout being saved in the array. This means that all previous workouts have been replaced, creating a chain of overwriting that leads to only one workout being stored effectively.

Answer 3

Answer №2

I managed to solve the issue:

 window.addEventListener('load', function(){

    var getInfo = JSON.parse(localStorage.getItem('get_info'));
    var dom = document.getElementById('section');

    var names=[]; //initialize names array
    var workRestArr = [];
    var resArr = [];
    var intArr = [];


    for(var key in getInfo){
        var obj = getInfo[key];


        for(var prop in obj){

            dom.innerHTML += "<hr/><div class ='workout_title'> <h1>"+obj[prop].name.replace('_',' ')+"</h1></div>"; //replace underscore with space in workout names with more than one word - display name
            dom.innerHTML += "<div class='workout_desc'><h4>"+obj[prop].desc+"</h4></div>"; //display description

            dom.innerHTML += "<div class='workout_link'><a id='"+obj[prop].name+"'>START >></a></div>";


            names.push(obj[prop].name); //store all ids in names array
            workRestArr.push(obj[prop].work_rest); //store all work_rest in array
            resArr.push(obj[prop].res); // store all resistance levels in array
            intArr.push(obj[prop].intensity); //store all intensity levels in an array

        }

    }


    for(var i = 0; i<names.length; i++){
        var el = document.getElementById(names[i]);
        var w = workRestArr[i];
        var r = resArr[i];
        var int = intArr[i];

        (function(w, r, int) {
            el.addEventListener('click', function() {
                localStorage.setItem('work_rest', JSON.stringify(w));
                localStorage.setItem('resistance', JSON.stringify(r));
                localStorage.setItem('intensity', JSON.stringify(int));
                location.href = '../Workout_Page_example/index.html';
            })
        })(w, r, int);

    }

})

Although I am still unsure of the intricate workings of this code, my assumption is that it involves closures and variable scope. It would be beneficial to have a detailed explanation. Thank you

Answer 4

I managed to solve the issue:

 window.addEventListener('load', function(){

    var getInfo = JSON.parse(localStorage.getItem('get_info'));
    var dom = document.getElementById('section');

    var names=[]; //initialize names array
    var workRestArr = [];
    var resArr = [];
    var intArr = [];


    for(var key in getInfo){
        var obj = getInfo[key];


        for(var prop in obj){

            dom.innerHTML += "<hr/><div class ='workout_title'> <h1>"+obj[prop].name.replace('_',' ')+"</h1></div>"; //replace underscore with space in workout names with more than one word - display name
            dom.innerHTML += "<div class='workout_desc'><h4>"+obj[prop].desc+"</h4></div>"; //display description

            dom.innerHTML += "<div class='workout_link'><a id='"+obj[prop].name+"'>START >></a></div>";


            names.push(obj[prop].name); //store all ids in names array
            workRestArr.push(obj[prop].work_rest); //store all work_rest in array
            resArr.push(obj[prop].res); // store all resistance levels in array
            intArr.push(obj[prop].intensity); //store all intensity levels in an array

        }

    }


    for(var i = 0; i<names.length; i++){
        var el = document.getElementById(names[i]);
        var w = workRestArr[i];
        var r = resArr[i];
        var int = intArr[i];

        (function(w, r, int) {
            el.addEventListener('click', function() {
                localStorage.setItem('work_rest', JSON.stringify(w));
                localStorage.setItem('resistance', JSON.stringify(r));
                localStorage.setItem('intensity', JSON.stringify(int));
                location.href = '../Workout_Page_example/index.html';
            })
        })(w, r, int);

    }

})

Although I am still unsure of the intricate workings of this code, my assumption is that it involves closures and variable scope. It would be beneficial to have a detailed explanation. Thank you

leveraging the localStorage feature in a for-in iteration

Answer №1

Answer №2

Similar questions

Sending data from jQuery to an AngularJS function is a common task that can be accomplished in

Is it considered acceptable in React for the value of one state to be determined by another state?

What could be causing my function to execute thrice?

Utilize AJAX to invoke a PHP function through JavaScript

Ensure the left and right screen widgets remain fixed in their positions as the user scrolls down the page using the spacebar

What are the steps to lift non-React statics using TypeScript and styled-components?

Simple solution for storing key-value pairs temporarily in a form using JQuery

What is the process for changing CORS origins while the NodeJS server is active?

The issue of JavaScript failing to connect to the HTML file

JavaScript does not function properly on dynamically loaded content from AJAX requests and it is not relying on

Is it possible for me to move props object deconstruction into a separate module?

As the height is expanded, the background color gradually infiltrates the body of the page

Issue with dropdown component in material ui version v1.0 beta 26 encountered

The application monitored by nodemon has halted - awaiting modifications in files before restarting the process

Tips for incorporating an anchor tag within an img tag in HTML?

Tips for updating the content of a div with fresh data using a slideshow effect in jQuery

Prevent repetitive content on your Node.js server

Generate a custom website using React to display multiple copies of a single item dynamically

Identifying text within a paragraph using JavaScript regex, excluding any URLs mentioned

Learn the process of transmitting data from middleware to components and APIs in Next.js version 13