Счетчик декрементов неправильно

Question

У меня есть некоторые данные, хранящиеся в localStorage, я хочу, чтобы эти данные выводились динамически (когда нажимаются стрелки "до" и "после"). Я перенаправляю страницу на себя и отображаю название дня, когда документ будет готов.

Когда я нажимаю "Далее", дни увеличиваются правильно, но когда я щелкаю раньше, день не уменьшается должным образом, я пытался обработать случай (если counter =-1, counter= maxcounter), но он не работал.. Вот что я попробовал:

Javascript:

 function GetCurrentDay() {
     if (localStorage["CurrentDay"] == null || localStorage["CurrentDay"] == 'NaN' || localStorage["CurrentDay"]=="undefined") {
         localStorage["Counter"]= 0;
         i = localStorage["Counter"];
         localStorage["CurrentDay"] = localStorage["Day" + i];
    }
    return localStorage["CurrentDay"];
}
function GoToNextDay() {
    var d = GetCurrentDay();
    i = localStorage["Counter"];
    i = i*1 + 1;
    localStorage["Counter"] = i;
    if(i!= localStorage["SchoolDays"]+1){
        localStorage["CurrentDay"] = localStorage["Day" + i];
    }else{
        localStorage["CurrentDay"] = localStorage["Day" + 0];    
    }
    return true;
}
function GoToPrevDay() {
    var d = GetCurrentDay();
    i = localStorage["Counter"];
    i = i*1 - 1;
    localStorage["Counter"]=i;
    if(i>0){  
        localStorage["CurrentDay"] = localStorage["Day" + i];
    }else{
        i=localStorage["SchoolDays"];
        localStorage["Counter"]=i; 
        localStorage["CurrentDay"] = localStorage["Day" + i];    
    }
    return true;
}

У вас есть идеи, как я могу это исправить?

Answer 1

Я не совсем уверен, что понимаю, зачем вам нужно локальное хранилище для отображения и увеличения дня. Без дополнительной информации о том, какое поведение вы ожидаете, трудно дать полностью информированный ответ. Прежде всего, как предложил Берги в комментариях, вы злоупотребляете локальным хранилищем.

Например, вместо:

function GetCurrentDay() {
     if (localStorage["CurrentDay"] == null || localStorage["CurrentDay"] == 'NaN' || localStorage["CurrentDay"]=="undefined") {
         localStorage["Counter"]= 0;
         i = localStorage["Counter"];
         localStorage["CurrentDay"] = localStorage["Day" + i];
    }
    return localStorage["CurrentDay"];
}

Вы могли бы сделать:

function GetCurrentDay() {
    var currentDay = localStorage.CurrentDay;
    if (!currentDay) {
        var counter = 0;
        currentDay = localStorage["Day" + counter];
    }
    localStorage.Counter = counter;
    localStorage.CurrentDay = currentDay;

    return currentDay;
}

Вышеупомянутый подход намного лучше, потому что вы получаете доступ к localStorage только тогда, когда вам нужно получить или установить определенные значения. Все что происходит между локальными переменными, что будет намного быстрее. Также, где это возможно, вы должны использовать точечную нотацию для доступа к объектам JavaScript. Это просто намного более читабельно.

Теперь вернемся к основному вопросу. Вы уверены, что вам нужно localStorage вообще? Похоже, вы перезагружаете страницу и используете localStorage для отслеживания определенных значений. Было бы намного проще для вас и ваших посетителей, если бы вы избегали этого и динамически обновляли поле этого дня. Например, скажем, у вас есть html-структура, подобная этой, где-то на вашей странице:

<div id="day">0</div>
<span id="next">Next</span>
<span id="previous">Previous</span>

Вы можете слушать события кликов и обновлять их соответственно.

var day = 0,
    dayEl = document.getElementById('day');

document.getElementById('next').onclick = function() {
    dayEl.firstChild.nodeValue = ++day;
}

document.getElementById('previous').onclick = function() {
    dayEl.firstChild.nodeValue = --day;
}

Нет необходимости в localStorage и перезагрузке страницы. Приведенный выше пример сильно упрощен, но я надеюсь, что он поможет вам разобраться в вашем подходе.