Question

这是我在stackOverflow上的第一篇文章，虽然在我需要帮助时我一直在论坛上挥之不去。但是，我无法找到当前问题的答案，所以我认为我最好开帐户并问。

这是一个3页的锻炼应用程序 - 第1页：用户选择他们希望使用的健身器材（自行车，划船者或x训练师）以及有哪些难度，第2页：所有可用选项的锻炼。第3页：完成实际锻炼。

基本上，我正在尝试（如果可能的话），根据用户点击的链接将某些数据存储在localStorage对象中，但是发生的事情是 for 循环中的最后一个值无论点击哪个链接，都会保存。请看下面，希望你能看出我的意思：

第1页:(有2个下拉菜单，第一个用户选择他们想要使用的设备，第二个选项是他们选择锻炼的难度）：

//constructor function - create workouts with instances of this function
function Workout(name, desc, loc, work_rest, res, intensity){
    this.name = name;
    this.desc = desc;
    this.loc = loc;
    this.work_rest = work_rest;
    this.res = res;
    this.intensity = intensity;
}


//CREATE WORKOUTS
var bike = {
    easy: [
        {workout_1: new Workout('Tabata', 'This is a tabata style workout', '../Workout_page_example/index.html', [20, 10, 20, 10, 20, 10, 20, 10, 20, 10, 20, 10, 20, 10, 20, 10], [8,2,8,2,8,2,8,2,8,2,8,2,8,2,8,2], [120,60,120,60,120,60,120,60,120,60,120,60,120,60,120,60])},
        {workout_2: new Workout('Classic_HIIT', 'This is a HIIT session', '../Workout_page_example/index.html',[60,30,60,30],[7,3,7,3],[100, 70, 100, 70])},
        {workout_3: new Workout('Clock_Face', 'Beat the clock', '../Workout_page_example/index.html',[120, 60, 110, 60, 100, 60], [7,4,7,4,7,4],[120, 60, 120, 60, 120, 60])}
    ],
    int:[

    ],
    adv:[

    ]
};

btn.addEventListener('click', function() {
    //dependant on options - send storage information to 'choose a workout page'

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

    //send storage information for specific workout to this page
    location.href = 'workouts/index.html';
})

所以这个上面的页面很好 - 抱歉，如果它看起来有点块，我只展示相关部分，因为它是一个相当大的脚本，希望你能弄清楚每个变量与DOM相关的是什么直截了当。因此问题出现在第2页，此页面显示设备可用的所有锻炼和用户选择的难度，如下所示：

第2页:(此页面显示设备的所有锻炼和选择的难度）

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


            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


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

        }

    }

})

当用户点击其中一个链接时 - localStorage obj仅存储传入的最后一个对象实例。因此，在此示例中，名称为＆＃39; clock_face＆＃39;的实例的数据。我能理解为什么会这样，但我不确定如何纠正这个问题。

Answer 1

你正在循环你的3次训练并存储值，甚至没有等待用户选择训练，所以你当然会在每次迭代时覆盖存储的训练，因此只有阵列中的最后一个训练课程实际存储（覆盖了前一个，后者覆盖了前一个，其中......）

Answer 2

我找到了修复：

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

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

    var names=[]; //initiate 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);

    }

})

虽然我仍然不确定这是如何工作的，但我想是由于闭包和变量的范围，但它有助于更详细地解释这一点。感谢

在for循环中使用localStorage

2 个答案: