在页面加载时将URL中的json数据保存到浏览器内存中

时间:2017-09-14 13:52:11

标签: javascript json jquery-ui-autocomplete

我有一个包含一些JSON格式数据的URL。我想在页面加载时将此数据保存在本地浏览器内存中。稍后我需要使用此本地副本作为我的JQuery自动完成的源。目前我将自动完成源指向此URL,因此它非常频繁地调用该服务。 请帮我保存浏览器本地内存中的数据以及如何将其用于jQuery自动填充。 谢谢。

1 个答案:

答案 0 :(得分:0)

如果您真的想在本地更加永久地存储它,请查看local storage

您应该可以执行类似

的操作
$(document).ready(function {
    $.get('http://example.com', function (data) {
        localStorage.setItem('autocomplete', data.toString());
});

然后在任何页面上都可以使用

var autocompleteData = JSON.parse(localStorage.getItem('autocomplete')
$('#myautocomplete').autocomplete({source: autocompleteData});

但仅仅声明一个页面范围变量并使用它可能就足够了。这样每次加载一次就会调用一次,而你不需要使它过期。

<script>

    var autocompleteSource;

    $(document).ready(function {

        $.get('http://example.com', function (data) {
            autocompleteSource = JSON.parse(data);
        });

        $('#myautocomplete').autocomplete({source: autocompleteSource});

    });
</script>

这假设您可以以适当的格式将响应解析为数组。

根据评论更新:

我认为您仍然需要传递函数作为源,因为您正在进行包含搜索(indexOf(..) != -1)。

您的autocompleteSource将包含所有嵌套数据:也许

$.get('http://example.com', function (data) {
    autocompleteSource = [];
    data.countries.map(function(itemCountry) { 
        itemCountry.cities.map(function(itemCity) { 
            itemCity.destinations.map(function(itemDestination {
                autocompleteSource.push(itemDestination);
});

然后你会声明该方法只是处理本地数据集

$('#myautocomplete').autocomplete(source : function (request, response){
    var filtered = autocompleteSource.filter(function(item){
        return item.toLowerCase().indexOf(request.term.toLowerCase()) > -1
    });
    response(filtered);
});