I would like to store search results as cache in localStorage.

I would like to store all the cache as one localStorage value:

localStorage.getItem('search-cache')

Inside it I would like to have JSON object which I can add properties and retreive them. Unfortunately it doesn't work and the localStorage is not updated with the json results (its value keep being '{}').

I am not a javascript proffesional so please guide me how to do it well.

Here is the current code to cache results:

    var query = $(this).val();

    var cache = JSON.parse(localStorage.getItem('search-cache'));

    if (cache == null) {
        cache = '[{}]';
    }

    if (cache[query] == null) {

        $.getJSON('/api/guides/search?query=' + query, function (data) {
            $.each(data, function (index, guide) {
                $('#results').append('<li class="result-item">' + guide.Name + '</li>');
            });

            cache[query] = data;
            localStorage.setItem('search-cache', JSON.stringify(cache));
        });
    }
    else {
        $.each(JSON.parse(localStorage.getItem('search-cache')[query]), function (index, guide) {
            $('#results').append('<li class="result-item">' + guide.Name + '</li>');
        });

    }

I would like to store search results as cache in localStorage.

I would like to store all the cache as one localStorage value:

localStorage.getItem('search-cache')

Inside it I would like to have JSON object which I can add properties and retreive them. Unfortunately it doesn't work and the localStorage is not updated with the json results (its value keep being '{}').

I am not a javascript proffesional so please guide me how to do it well.

Here is the current code to cache results:

    var query = $(this).val();

    var cache = JSON.parse(localStorage.getItem('search-cache'));

    if (cache == null) {
        cache = '[{}]';
    }

    if (cache[query] == null) {

        $.getJSON('/api/guides/search?query=' + query, function (data) {
            $.each(data, function (index, guide) {
                $('#results').append('<li class="result-item">' + guide.Name + '</li>');
            });

            cache[query] = data;
            localStorage.setItem('search-cache', JSON.stringify(cache));
        });
    }
    else {
        $.each(JSON.parse(localStorage.getItem('search-cache')[query]), function (index, guide) {
            $('#results').append('<li class="result-item">' + guide.Name + '</li>');
        });

    }

• javascript
• jquery
• json
• local-storage
• getjson

Share Follow asked Feb 23, 2013 at 18:25 Aviran CohenAviran Cohen 5,69144 gold badges4949 silver badges7676 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You've got some holes in your logic.

var cache = JSON.parse(localStorage.getItem("..."));
if (cache == null) { cache = "[{}]"; }

Well, if the item DID exist, you've set cache to be equal to that object.
Otherwise, you've set cache to be equal to the string "[{}]".

Instead of thinking about how you're going to build your localstorage, think about how you're going to build your result list.

var cache_json = localStorage.getItem("search-cache"),
    search_cache = JSON.parse(cache_json) || {};

var query = $("...").value(); // or whatever

search_cache[query] = search_cache[query] || { results : [] };

var list = $(......)
list.each(function () {
    search_cache[query].results.push( /* whatever you want in your array */ );
});


cache_json = JSON.stringify(search_cache);
localStorage.setItem("search-cache", query_json);

Because, in case of your item search-cache is not defined, the initialization of your cache variable is not right.

You should initialize your array like this :

if (cache == null) {
    cache = []; 
    cache[query] = null;
}

To meet the condition when testing

if (cache[query] == null)

however, you need to test it like this :

if(typeof cache[query] == 'undefined')

cache is an object and not an array, initialize like cache = {} Rest of the code seems correct.