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