javascript - 如何使用 Ajax 保存缓存文件？

Question

我有一个 javascript/ajax 函数，它查找托管在另一台服务器上的 json 文件。我需要我的函数来执行以下操作：

1. 从外部服务器获取 json 文件
2. 将 json 文件保存在自己的本地服务器上
3. 检查 json 文件是否早于 1 小时
4. 如果它不早于 1 小时，则使用该数据
5. 如果超过 1 小时 - 从外部服务器重新下载并覆盖本地版本

目前，我的函数每次调用时都会从外部服务器获取数据。我需要添加此缓存功能，但不确定如何处理它。

任何人都可以提供任何建议吗？

这是我的代码：

       function ajaxLoad(page,url,type,variety,category , widgetClickedId)
       {         

            /*
             * Checking the clicked id is the same as passed in one
             * TODO refactor so the clicked id only ever gets passed 
             */
            if(widgetId != widgetClickedId && widgetClickedId != undefined)
            {
                return false;
            }

            var website = $('#button-print'+widgetId).data("website");          
            var page = $('#button-print'+widgetId).data("page");


            $.ajax({
                type: 'GET',                   
                url:  'www.myothersite.com/api/v1/productchoice.json?website='+website,
                async: true,
                jsonp: 'callback',
                dataType: 'jsonp',
                success: function(productchoice)
                { 

                    if(productchoice['brand'+widgetId] == 'null' || productchoice['brand'+widgetId] == undefined)
                    {
                        productchoice['brand'+widgetId] = '';
                    }
                    //check that all values are not null , if not , then show the widget                    
                    if(        productchoice['brand'+widgetId] == ''                                    
                            && productchoice['subject'+widgetId] == '' 
                            && productchoice['market'+widgetId] == ''
                            && productchoice['type'+widgetId] == ''
                            && productchoice['bookazinebrands'+widgetId] == '')
                    {                       

                        //is this corect?                           
                        $('#gdmContainer'+widgetId).hide();
                        //return false;
                    }
                    else
                    {                   
                        $('#gdmContainer'+widgetId).show();                         
                    }

                    setRibbons(productchoice.ribbonTop , productchoice.ribbonBottom);
                    getProductChoice( productchoice );    
                    setLoveTitle( productchoice);
                    setDefaultBtn(productchoice['defaultBtn'+widgetId]);                     
                    return productchoice; 
                }               
            });    

提前致谢！

Answer 1

您需要做的就是使用从 Ajax 请求返回的数据创建一个 javascript 对象。作为该对象的一部分，存储对象被缓存的日期。然后，您可以在每次调用该函数时将该日期与当前时间进行比较。

以下是我可以解决的方法：

     // Variable to contain cached object. Make sure it name it better...
     var x = null;

     function ajaxLoad(page, url, type, variety,category, widgetClickedId)
     {
        /*
        * Checking the clicked id is the same as passed in one
        * TODO refactor so the clicked id only ever gets passed 
        */
        if(widgetId != widgetClickedId && widgetClickedId != undefined)
        {
            return false;
        }

        var website = $('#button-print'+widgetId).data("website");          
        var page = $('#button-print'+widgetId).data("page");

        // Creating a new date and adding an hour to it.
        var d = new Date();
        d.setHours(d.getHours() + 1);

        // Test to ensure x is not null and it's not older than an hour old
        if (x != null && Date.parse(x.date) < d) {
            // Do your stuff with the cached file here
        }
        else {
            $.ajax({
                // set up your ajax request
                ...
                success: function (productchoice) {
                    // Make sure to cache the object
                    x.file = productchoice;
                    x.date = new Date();

                    // Do your stuff with the cached file here
                }
            });
        }
     }

将您的正常“成功”操作放在单独的函数中以避免重复代码是有益的。如果您这样做，您将使用缓存变量（x在示例代码中）而不是使用productchoice变量（即x.file['brand' + widgetId]）。