Как сохранять в localStorage историю изменений в textarea?

Question

[olya_097]

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

<div>
  <button id="next">+</button>
  <button id="prev">-</button>
</div>
<textarea name="" id="story" cols="30" rows="10"></textarea>

$(document).ready(function() {
  let story = JSON.parse(localStorage.getItem('story'));
  let counter = story.length - 1;

  if (story) {
    arr = story;
    $('#text').val(arr[counter]);
  } else {
    arr = [];
  };

  $('#text').change(function() {
    arr.push($(this).val());
    counter = arr.length - 1;

    let json = JSON.stringify(arr);
    localStorage.setItem('story', json);
  });

  $('#prev').click(function() {
    if (counter > 0) {
      $('#text').val(arr[--counter]);
    }
  });
  $('#next').click(function() {
    if (counter < arr.length) {
      $('#text').val(arr[++counter]);
    }
  });
});

Не работает, как исправить?

Answer 1

[0xD34F]

1. Вы пытаетесь вычислять длину... чего? Если в localStorage ничего нет, story (кстати, а почему story? - по смыслу тут больше history подходит) будет null, у которого никакой length нет (вы бы хоть консоль открыли - там же всё написано).

2. Обработчик события change вы назначаете... кому? Элемент с id="text" не существует.

<div>
  <button data-step="-1">-</button>
  <button data-step="+1">+</button>
</div>
<textarea cols="30" rows="10"></textarea>

const history = JSON.parse(localStorage.getItem('history')) || [];
let index = history.length - 1;

const $text = $('textarea').change(function() {
  index = history.push($text.val()) - 1;
  localStorage.setItem('history', JSON.stringify(history));
});

$('[data-step]').click(function() {
  goTo(index + +this.dataset.step);
});

goTo(index);

function goTo(newIndex) {
  if (0 <= newIndex && newIndex <= history.length - 1) {
    index = newIndex;
    $text.val(history[index]);
  }
}

Comments

[olya_097]

cпасибо!