using localstorage to keep html on page refresh not working

Question

I'm trying to integrate this fiddle: http://jsfiddle.net/jaredwilli/ReT8n/ in a fiddle I'm doing:

https://jsfiddle.net/vlrprbttst/99c8gn7k/

Basically you have a basket with some items inside of it, you can add or remove them. What I want is that, on page refresh, the html() of the .basket is kept in local storage. I'm stuck here:

https://jsfiddle.net/vlrprbttst/z8cffk4c/

I've put the forLocalStorage variable in the click handler because otherwise, the var wouldn't update itself but now I'm guessing that the final local storage code

  if(localStorage.getItem('toDoData')) {
    forLocalStorage = localStorage.getItem('toDoData');
}

is not working because it can't retrive the variable?

I've tried moving around things but I'm stuck here. what am i doing wrong?

Answer 1

You need to update DOM once your variable is set, e.g:

 // LOCAL STORAGEEEEEEEE
  if (localStorage.getItem('toDoData')) {
    forLocalStorage = localStorage.getItem('toDoData');
    $('#cart').html(forLocalStorage);
    itemsCount();
  }