localStorage - looping through a value of a specific key in javascript

Question

This might be tricky to explain, so I'll do my best.

I'm trying to use localstorage in a way, that im not even sure if its possible. Basically I want to submit some values as a list. When the user reloads, it pulls those values from the local storage and displays them.

Ideally, i wanted to store each value under the same Key and try and loop through that key and print the values associated with that key. As you can see when I reload, it's loading each letter in the array since its looking at the length of the entire value and not each word.

I know Im a bit off, but its about as far as I got. Would appreciate any hints (I've never worked with localStorage, so its a bit new to me)

consider this:

    var i = 0;
    var taskArray = [];
    var storedTasks = localStorage.getItem('Tasks');

  for( i = 0; i < localStorage.length; i++)
    $("#tasks").append("<li id='task-"+ i +"'>" + storedTasks[i] + "</li>");


     // Add a task
    $("#tasks-form").submit(function() {
        if ($("#task").val() != "") {
             $("#tasks").append("<li id='task-" + i + "'>"  + '<span class="taskSpan">' + $("#task").val() + '</span>' + '</li>')
            $("#task-" + i).css('display', 'none');
            $("#task-" + i).fadeIn(350);
            taskArray.push($("#task").val());
            localStorage.setItem('Tasks', taskArray);
            i++;

        }

        return false;
    });

JSFiddle

Can you show an example of what the stored value might be? And what it should become? And why are you manually incrementing `i` in a `for` loop that does that automatically? — David Thomas, Jun 23 '14 at 22:26
`localStorage` only supports storing strings. To store an array as a string, see [Storing Objects in HTML5 localStorage](http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — Jonathan Lonowski, Jun 23 '14 at 22:31
use something like this: `var storedTasks = localStorage.getItem('Tasks').split(' ');`, with your 'array' of tasks in localStorage looking like this: `'task1 task2 task3 task4'` — myfunkyside, Jun 23 '14 at 22:34
or, if you tasks have spaces in them, use `&&` to separate between tasks, and then also split on `'&&'`. Than way, your variable `storedTasks` becomes an array with all the tasks... — myfunkyside, Jun 23 '14 at 22:36
@myfunkyside thanks, this indeed worked. Didnt even think about the split() method — gregdevs, Jun 23 '14 at 22:48

score 2 · Accepted Answer · answered Jun 23 '14 at 22:33

Regardless of the data type you push into localStorage, it all gets converted to a string in the end. This means that anything you pull out of localStorage must then be converted back to whatever data type you are expecting.

In this case, since you're working with a string, you're treating your iteration as one through an array of characters instead of an array of strings.

To convert back to an array, simply split on the ',' that separates each word:

var storedTasks = localStorage.getItem('Tasks');
var storedTasksArray = storedTasks.split(',');

Now, iterate through the storedTasksArray, and each index points to a word instead of a letter.

As an aside, to make your life less complicated, if you're going to use a lot of localStorage, you might consider doing a typeof value and storing the type in localStorage as well, then when you pull out the data, you have some metadata you can use to convert back to the data type prior to insertion.

thanks very much, this was what i was looking for. Didn't think about the split method. — gregdevs, Jun 23 '14 at 22:46

localStorage - looping through a value of a specific key in javascript

1 Answers1