Зачем showButton в saveHistory и setHistory?

Question

[olya_097]

Дан текстареа. В него можно ввести данные, затем поредактировать их, затем еще поредактировать. Пусть текстареа хранит историю своих изменений (даже после перезагрузки страницы). Сверху над текстареа должны появится стрелочки, с помощью которых можно перемещаться по истории.

сам код https://repl.it/repls/SeveralSpringgreenAstrophysics

1) для чего .toLowerCase в 7 строке?
я понимаю, что это метод для перевода в нижний регистр
но зачем он нам в данной ситуации?

2) почему в строке берем sessionStorage
а не локалсторадж

3) зачем showButton в saveHistory и setHistory?

4) код адекватно срабатывает и срабатывает ли?

Answer 1

[Антон Спирин]

1. Берем, выводим значение в консоль и смотрим:

var textarea = document.querySelector('.textarea-field textarea');
console.log('tag name', textarea.tagName); //  TEXTAREA
console.log('tag name to lowercase', textarea.tagName.toLowerCase());  // textarea

Думаю, дополнительные комментарии излишни.
Строка используется как ключ для проверки наличия и сохранения сохраненного состояния в sessionStorage.

2. Window.sessionStorage. Читаем первый же абзац и находим ответ на свой вопрос.

3. Чтобы показывать кнопки prev и next при загрузке страницы если есть сохраненные данные и после изменения значения textarea.

4. В 35 строке ошибка. Должно быть:
var arrValue = JSON.parse(sessionStorage[key]);
Насчет остального, надо смотреть требования по заданию, если они есть.

Comments

[olya_097]

cпасибо

1) а зачем мы делаем в 10 строке elem.value = JSON.parse(sessionStorage[key]).pop(); ?

2) зачем с массивом делаем JSON.stringify ? разве так отдать нельзя?

3) и почему в функции saveHistory параметр только elem
а во всех остальных- (key, elem) ?

[Антон Спирин]

olya_097,
1. sessionStorage хранит строки. И массив данных лежит в виде JSON строки для того чтобы использовать эти данные в программе их надо распарсить. Вызов array.pop() удаляет последний элемент из массива и возвращает его. Факт удаления нас не интересует, так как ссылок на полученный массив не сохраняется, в данном случае, метод используется, именно, для получения последнего элемента.

2. Опять же, данные в sessionStorage хранятся в виде строк. Если мы не преобразуем их в JSON-строку, то при сохранении массив преобразуется вызовом toString():

const array = [1,2,3,4,5];
console.log(array.toString()) // 1,2,3,4,5
console.log(JSON.stringify(array)) // [1,2,3,4,5]

В первом случае мы получим строку. Во втором валидный JSON, который можно легко распарсить вызовом JSON.parse.

Откройте панель разработчика, вкладку Application. Выберите пункт Storage --> Session Storage --> https
: //replbox.repl.it. Посмотрите в каком виде хранятся данные. Попробуйте добавить при инициализации, что-то вроде:
sessionStorage.setItem('test', [1,2,3,4,5]). Посмотрите в панели разработчика результат.

3. Потому что key мы получаем в методе saveHistory и там передаем в остальные вызовы. По-хорошему saveHistory надо переименовать в init.

[olya_097]

Спасибо)
А у Вас код работает? У меня только на - реагирует, на + нет

[Антон Спирин]

olya_097, я писал в ответе, что в коде ошибка в 35 строке и о том как ее поправить.
Сам код очень плохой и не стоит его использовать. Взгляните на строку 36. При наличии в массиве истории двух одинаковых значений, что для истории изменения текста вполне вероятно, вы не сможете перейти в конец истории если отмотаете ее назад до любого дубликата, другими словами будете в цикле перебирать элементы массива от первого продублированного значения до второго.

[olya_097]

Антон Спирин, так я поняла
Я исправила тут ошибку про которую Вы говорили
После него заработал -

А вот плюс -нет

[Антон Спирин]

olya_097, в этой строке исправляется работоспособность кнопки "+", кнопка "-" и так работает. Кнопку "+" можно использовать только после использования "-".

Возможно, вы до этого вносили какие-то изменения в код.

[olya_097]

Антон Спирин,спасибо

а почему в функции nextValue var arrValue мы находим так?
var arrValue = JSON.parse([key]);

а в prevValue вот так var arrValue = JSON.parse(sessionStorage[key]);?

почему не одним и тем же способом в обоих случаях?

[Антон Спирин]

olya_097, я же писал, что в 35 строке ошибка) В обоих случаях должно быть var arrValue = JSON.parse(sessionStorage[key]);

[olya_097]

Антон Спирин, cпасибо

извините, еще раз взглянула на код
по-моему есть неочевидные моменты

1)

if (index < arrValue.length - 1) elem.value = arrValue[++index];

arrValue.forEach( function(value, i) {
if (value === elem.value && i > 0) elem.value = arrValue[--i];
});

а почему бы не сделать что в первом случае
что во втором
через forEach?
или можно?

2) не совсем понятно зачем

if (index < arrValue.length - 1)

 if (value === elem.value && i > 0)

почему столь разные проверки, в чем их суть? понятно что для кнопок
но глубже

3)

function addActiveClass() {
  for (let i = 0; i < arguments.length; i++) {
    if (!arguments[i].classList.contains('active')) arguments[i].classList.add('active');
  }
}

не совсем понятно зачем нам let в данном случае
понятно что он ограничивает область видимости
но всё-же
arguments - откуда получаем? не совсем понятна суть функции помимо добавления класса, если его нет

Спасибо