Массив localStorage не сохраняет данные, если сделать refresh страницы

#javascript #json #localstorage

Есть форма, в нее пользователь вписывает данные и они сохраняются в 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
  

  

    
    
    
  

  

    

  




    

Ответы

Ответ 1

Проследите логику того, что делается в этих трех строчках:

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