Есть форма, в нее пользователь вписывает данные и они сохраняются в localStorage массиве под названием todo. Данные вписанные в форму оказываются в ul li списке. Я проверяю в консоли и они действительно добавляются в массив todo, но после обновления страницы данные исчезают из списка li пропадает и из массива todo тоже. Я думаю проблема либо в самом начале кода, где создается массив, либо в dataObjectUpdated(). Вопрос - как сделать, так чтобы данные сохранялись в массиве и refresh страницы на них не влиял. Решение желательно на чистом js
var content = {
todo: [],
completed: [],
uncompleted: []
};
var create = localStorage.setItem('todoList', JSON.stringify(content));
var data = JSON.parse(localStorage.getItem('todoList'));
var button = document.getElementById('button');
button.onclick = function() {
var input = document.getElementById('input').value;
if (input) {
addItem(input);
}
};
var input = document.getElementById('input');
input.onkeypress = function(e) {
if (e.keyCode === 13) {
button.click();
return false;
}
};
renderTodoList();
function renderTodoList() {
for (var i = 0; i < data.todo.length; i++) {
var value = data.todo[i];
addItemToDOM(value);
}
}
function addItem(value) {
addItemToDOM(value); // функции нет (для экономии места)
document.getElementById('input').value = '';
data.todo.push(value);
dataObjectUpdated();
}
function dataObjectUpdated() {
localStorage.setItem('todoList', JSON.stringify(data));
}
ToDoList
Ответ
Проследите логику того, что делается в этих трех строчках:
var content = {todo:[], completed:[], uncompleted:[]};
var create = localStorage.setItem('todoList', JSON.stringify(content));
var data = JSON.parse(localStorage.getItem('todoList'));
Вы создаете пустой content, сохраняете его в localStorage и тут же читаете оттуда в data
Вот как надо:
var data = {todo:[], completed:[], uncompleted:[]};
var stored = localStorage.getItem('todoList');
if (stored)
data = JSON.parse(stored);
Комментариев нет:
Отправить комментарий