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

i trying implement localstorage simple oop todo list.

the fiddle here: https://jsfiddle.net/b81t2789/

i thought treat local storage array , copy logic used actual array doesn't work.

here, right after pushing task array, added line stores task in local storage , stringifies it:

// function adds new task 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 function displays new array element added 1 retrieves item local storage, parses it, creates dom element new task , appends container.

//function displays array elements function displayarray(parent,obj){   var task = make("div","class","taskitem",obj);   parent.appendchild(task);   fadein(task); }  //function 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 @ all, not sure why, , if able work how continue go storing , updating notes did in array local storage? thought easy figured out how make todo objects , arrays pretty (when thought super difficult, it's been week , i've made no progress!)

i guess these pitfalls of learning code yourself, appreciated thank you!

here 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 create dom elements , set 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 fires function pushes task array. when(todo, "keypress", function(event){   if (event.key == "enter" || event.keycode == 13) {     pusharray();     todo.value = "";   } });  // "show array" function verify array being updated (i better using 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 adds new task array function pusharray(){   var newtask = new task(todo.value, "no note yet");   taskitems.push(newtask);     displayarray(result, newtask.name);   appendnote(result, newtask); }  //function displays array elements function displayarray(parent,obj){   var task = make("div","class","taskitem",obj);   parent.appendchild(task);   fadein(task); }  //function displays notes function appendnote(theelement,obj){    var newclassitem = make("input","class","tasknote");   theelement.appendchild(newclassitem);   when(newclassitem, "keypress", submitnote.bind(null, obj, newclassitem)); }  //function 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);     });   } } 

being localstorage key-value storage, depending on needs, better off serializing (stringifying, whatever) array , saving in single index.

var tasks = [   'post question on so',   'describe carefully',   'get nice reply',   'implement suggested solution' ]; 

if need split performance reasons, have index them arbitrary index. if have reordering gets tricky , can either reflush whole set of tasks every time adds/edits/deletes/reorder tasks (memory-efficient, cpu intensive) or save indexes in different key can reconstruct order later, like:

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

the first idea simple implement, give problems arbitrarily long lists, second 1 more easy on cpu harder implement (and uses more memory). depends on specifics of case.