Question

So I’ve been working with 2 different Localstorage application for a task I’ve been given. The one is a todo list and the other one is notes which both work on the same html file.

Now, the todo list have 3 localstrorage keys. One for the value of the todo. Second for the order of the todo’s (which is first, sec, third etc) and Third how many todo’s you have in general. So thats 3 different values.

For the notes is 1 localstorage Key with all its values. (see image below)

Now the problem is: If for example I have 3 notes and then I add a todo I get this on the localstorage:

which this is working fine.

But, if I add another two notes, I get this:

which is logical although the last two notes doesn’t show.

Another example:

This will not show any notes although there are 4.

I’m not sure how to explain this but basically what happens is that what ever is written on the localstorage after a todo-ID, doesn’t show but note that the todoList keeps working perfectly.

I’m not pretty sure what the problem is but what I think it could be its the way the keys are being loaded. maybe ???

So here is how I load the notes:

var initStickies = function initStickies() {
    $("<div />", { 
        text : "+", 
        "class" : "add-sticky",
        click : function () { createSticky(); }
    }).prependTo(document.body);
    initStickies = null;
},
openStickies = function openStickies() {
    initStickies && initStickies();
    for (var i = 0; i < localStorage.length; i++) {
        createSticky(JSON.parse(localStorage.getItem(localStorage.key(i))));
    }
}

and this is how I load the todo-list:

orderList = localStorage.getItem('todo-orders');

orderList = orderList ? orderList.split(',') : [];

for( j = 0, k = orderList.length; j < k; j++) {
    $itemList.append(
        "<li id='" + orderList[j] + "'>"
        + "<span class='editable'>" 
        + localStorage.getItem(orderList[j]) 
        + "</span> <a href='#'>X</a></li>"
    );
}

What the problem could be? Does anyone had this problem before?

Thanks alot for reading and sorry for the big post. I’m trying to be as clear as possible. I’ve been thinking how to fix this for really long time and im coming to a dead line. Hope someone can help me. Thanks again

Answer 1

In your notes app, you try to iterate through every item in localStorage and parse them as JSON. When it gets a JSON string, it successfully parses it and continues its work. When it gets your todo item, it breaks and stops working. If you want to have both todo and note in one localStorage, you’d better have some way to tell the difference. One simple way is to have todo- as prefix for todo item (as you’ve alreayd done) and note- as prefix for note item.

One possible quick fix for your code is to use try ... catch ... to avoid non-JSON string breaking your iteration:

for (var i = 0; i < localStorage.length; i++) {
    try {
        createSticky(JSON.parse(localStorage.getItem(localStorage.key(i))));
    } catch (error) { /* do nothing and just skip */ }
}