将Json存储在localStorage中

Question

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>');
        });

    }

Answer 1

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);

Answer 2

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')

Answer 3

cache是​​一个对象而不是一个数组，初始化类似于cache = {}其余的代码似乎是正确的。