Plain OOP Javascript: Treating localStorage as an Array doesn't work?

Question

I am trying to implement localStorage with my simple OOP todo list.

The fiddle is here: https://jsfiddle.net/b81t2789/

I thought I could just treat the local storage like an array and copy the logic I used with my actual array but that doesn't work.

Here, right after pushing the task into the array, I added a line that stores the task in the local storage and stringifies it:

// function that adds new task to the array
function pushArray(){
  var newtask = new Task(toDo.value, "No note yet");
  taskItems.push(newtask);  
  var storedTask = localStorage.setItem(newtask, JSON.stringify(newtask));
  displayStorage(result2, storedTask);
  displayArray(result, newtask.Name);
  appendNote(result, newtask);
}

Then right below the function that displays the new array element I added one that retrieves the item from local storage, parses it, then creates a DOM element with the new task and appends it to another container.

//function that displays array elements
function displayArray(parent,obj){
  var task = make("div","class","taskitem",obj);
  parent.appendChild(task);
  fadeIn(task);
}

//function that displays storage elements
function displayStorage(parent,obj){
  var retrieveObject = localStorage.getItem(obj);
  var parseTask = JSON.parse(retrieveObject);
  var newDiv = make("div", "class", "newdiv", parseTask);
  parent.appendChild(newDiv);
  fadeIn(newDiv);
}

This doesn't work at all, not sure why, and then if I were to be able to get this to work how would I continue to go about storing and updating notes like I did in the array with local Storage? I thought this would be easy as I figured out how to make a todo with objects and arrays pretty quickly (when I thought it would be super difficult, but it's been a week now and I've made no progress!)

I guess these are the pitfalls of learning to code by yourself, any help would be much appreciated thank you!

Here is the full javascript code:

//getElementById shortcut
function grab(id) { 
  return document.getElementById(id); 
}

// add eventlistener shortcut
var when = function() {
  return function(obj, event, func) {
    obj.addEventListener(event, func, false);
  }; 
}();

//Custom function to create DOM elements and set their contents
function make(el,type,name,content){
  var theElement = document.createElement(el);
  theElement.setAttribute(type, name);
  theElement.innerHTML = content;
  return theElement;
}

//compute style shortcut
function setStyle(theElement){
  return window.getComputedStyle(theElement);
}

//fade in shortcut.
function fadeIn(theElement){
  var compute = setStyle(theElement).opacity;
  theElement.style.opacity = 1;
}
/*****************************************************/

var toDo = grab("todo");
var result = grab("demo");
var demolist = grab("demolist");
var button = grab("btn");

// submit input on enter which fires function that pushes task into the array.
when(toDo, "keypress", function(event){
  if (event.key == "Enter" || event.keyCode == 13) {
    pushArray();
    toDo.value = "";
  }
});

// "SHOW ARRAY" FUNCTION to verify that the array is being updated (I like this better than using the console);
when(button, "click", function(event){
  demolist.innerHTML = "";
   for(i=0; i< taskItems.length; i++){
     demolist.innerHTML += taskItems[i].Name + " " + taskItems[i].Note + "<br>";
   }
});


function showNotes(theNote){
  var defaultNote = "No note yet";
  if(theNote){

  }
}

var taskItems = [];

/*********************************************************/

//create Task object
function Task(name, note){
  this.Name = name;
  this.Note = note;
  this.completed = false;
}

// function that adds new task to the array
function pushArray(){
  var newtask = new Task(toDo.value, "No note yet");
  taskItems.push(newtask);  
  displayArray(result, newtask.Name);
  appendNote(result, newtask);
}

//function that displays array elements
function displayArray(parent,obj){
  var task = make("div","class","taskitem",obj);
  parent.appendChild(task);
  fadeIn(task);
}

//function that displays notes
function appendNote(theElement,obj){ 
  var newClassItem = make("input","class","tasknote");
  theElement.appendChild(newClassItem);
  when(newClassItem, "keypress", submitNote.bind(null, obj, newClassItem));
}

//function for submitting notes
function submitNote(task,noteInput){
  if (event.key == "Enter" || event.keyCode == 13) {
    task.Note = noteInput.value;
    var newNote = make("div", "class", "hasNote", task.Note);
    noteInput.parentNode.replaceChild(newNote, noteInput);
    fadeIn(newNote);
    when(newNote,"dblclick", function(){
      newNote.parentNode.replaceChild(noteInput, newNote);
    });
  }
}

Answer 1

Being localStorage a key-value storage, depending on your needs, you are better off serializing (stringifying, whatever) the array and saving in a single index.

var tasks = [
  'post the question on SO',
  'describe it carefully',
  'get a nice reply',
  'implement the suggested solution'
];

If you really need to split it for performance reasons, you have to index them by a arbitrary index. If you have reordering it gets tricky and you can either reflush the whole set of tasks every time someone adds/edits/deletes/reorder the tasks (memory-efficient, but very CPU intensive) or save the indexes in a different key so you can reconstruct the order later, like:

var tasks = {
  'task1': 'implement the suggested solution',
  'task2': 'describe it carefully',
  'task4': 'get a nice reply',
  'task9': 'post the question on SO'
};
var tasksOrder = [9, 2, 4, 1];

The first idea is very simple to implement, but will give you problems with arbitrarily long lists, the second one is much more easy on the CPU but much harder to implement (and uses more memory). It depends on the specifics of your case.