Caching a jquery ajax response in javascript browser

Question

I would like to enable caching of an ajax response in javascript browser   From the jquery ajax docs      By default  requests are always issued  but the browser may serve   results out of its cache  To disallow use of the cached results  set   cache to false  To cause the request to report failure if the asset   has not been modified since the last request  set ifModified to true    However  neither of these address forcing caching   Motivation  I want to put   ajax        calls in my initialisation functions  some of which request the same url  Sometimes I need to call one of these initialisation functions  sometimes I call several    So  I want to minimise the requests to the server if that particular url has already been loaded   I could roll my own solution  with some difficulty    but I would like to know if there is a standard way of doing this

User · Answer

function getDatas                 let cacheKey    memories                if  cacheKey in localStorage                    let datas   JSON parse localStorage getItem cacheKey                        if expired                 if  datas  expires    lt  Date now                          localStorage removeItem cacheKey                        getDatas                     else                       setDatas datas                                   else                     ajax                        dataType    json                        success   function datas  textStatus  jqXHR                            let today   new Date                             datas  expires     today setDate today getDate     7     expires in next 7 days                          setDatas datas                            localStorage setItem cacheKey  JSON stringify datas                                                url    http   localhost phunsanit snippets PHP json json encode php                                                        function setDatas datas                   display json as text                 datasA   text JSON stringify datas                    your code here                                        call         getDatas      enter link description here

User · Answer

If I understood your question  here is the solution          ajaxSetup   cache  true      and for specific calls     ajax           url               type   GET           cache  false                                   If you want opposite  cache for specific calls  you can set false at the beginning and true for specific calls

User · Answer

All the modern browsers provides you storage apis  You can use them  localStorage or sessionStorage  to save your data   All you have to do is after receiving the response store it to browser storage  Then next time you find the same call  search if the response is saved already  If yes  return the response from there  if not make a fresh call   Smartjax plugin also does similar things  but as your requirement is just saving the call response  you can write your code inside your jQuery ajax success function to save the response  And before making call just check if the response is already saved

User · Answer

I was looking for caching for my phonegap app storage and I found the answer of  TecHunter which is great but done using localCache   I found and come to know that localStorage is another alternative to cache the data returned by ajax call  So  I created one demo using localStorage which will help others who may want to use localStorage instead of localCache for caching   Ajax Call     ajax       type   POST       dataType   json       contentType   application json  charset utf-8       url  url      data     Id       Id             cache  true    It must  true  if you want to cache else  false        async  false      success  function  data            var resData   JSON parse data           var Info   resData Info          if  Info                customerName   Info FirstName                       error  function  xhr  textStatus  error            alert  Error Happened                 To store data into localStorage     ajaxPrefilter function  options  originalOptions  jqXHR    if  options cache        var success   originalOptions success      noop          url   originalOptions url       options cache   false    remove jQuery cache as we have our own localStorage     options beforeSend   function              if  localStorage getItem url                 success localStorage getItem url                return false                    return true             options success   function  data  textStatus            var responseData   JSON stringify data responseJSON           localStorage setItem url  responseData           if    isFunction success   success responseJSON     call back to original ajax call                If you want to remove localStorage  use following statement wherever you want   localStorage removeItem  Info      Hope it helps others

User · Answer

Old question  but my solution is a bit different   I was writing a single page web app that was constantly making ajax calls triggered by the user  and to make it even more difficult it required libraries that used methods other than jquery  like dojo  native xhr  etc   I wrote a plugin for one of my own libraries to cache ajax requests as efficiently as possible in a way that would work in all major browsers  regardless of which libraries were being used to make the ajax call   The solution uses jSQL  written by me - a client-side persistent SQL implementation written in javascript which uses indexeddb and other dom storage methods   and is bundled with another library called XHRCreep  written by me  which is a complete re-write of the native XHR object   To implement all you need to do is include the plugin in your page  which is here   There are two options    jSQL xhrCache max time   60    Set the maximum age in minutes  any cached responses that are older than this are re-requested  Default is 1 hour   jSQL xhrCache logging   true    When set to true  mock XHR calls will be shown in the console for debugging   You can clear the cache on any given page via  jSQL tables       jSQL persist

User · Answer

cache true only works with GET and HEAD request   You could roll your own solution as you said with something along these lines    var localCache         data          remove  function  url            delete localCache data url              exist  function  url            return localCache data hasOwnProperty url   amp  amp  localCache data url      null             get  function  url            console log  Getting in cache for url    url           return localCache data url              set  function  url  cachedData  callback            localCache remove url           localCache data url    cachedData          if    isFunction callback   callback cachedData               function          var url     echo jsonp            ajaxButton   click function  e              ajax               url  url              data                    test   value                             cache  true              beforeSend  function                      if  localCache exist url                         doSomething localCache get url                        return false                                    return true                             complete  function  jqXHR  textStatus                    localCache set url  jqXHR  doSomething                                          function doSomething data        console log data       Working fiddle here  EDIT  as this post becomes popular  here is an even better answer for those who want to manage timeout cache and you also don t have to bother with all the mess in the   ajax   as I use   ajaxPrefilter    Now just setting  cache  true  is enough to handle the cache correctly    var localCache                    timeout for cache in millis         type  number              timeout  30000                   type      number  data                    data          remove  function  url            delete localCache data url              exist  function  url            return   localCache data url   amp  amp    new Date   getTime   - localCache data url      lt  localCache timeout              get  function  url            console log  Getting in cache for url    url           return localCache data url  data             set  function  url  cachedData  callback            localCache remove url           localCache data url                     new Date   getTime                data  cachedData                    if    isFunction callback   callback cachedData               ajaxPrefilter function  options  originalOptions  jqXHR        if  options cache            var complete   originalOptions complete      noop              url   originalOptions url            remove jQuery cache as we have our own localCache         options cache   false          options beforeSend   function                  if  localCache exist url                     complete localCache get url                    return false                            return true                     options complete   function  data  textStatus                localCache set url  data  complete                           function          var url     echo jsonp            ajaxButton   click function  e              ajax               url  url              data                    test   value                             cache  true              complete  doSomething                          function doSomething data        console log data       And the fiddle here CAREFUL  not working with   Deferred  Here is a working but flawed implementation working with deferred   var localCache                    timeout for cache in millis         type  number              timeout  30000                   type      number  data                    data          remove  function  url            delete localCache data url              exist  function  url            return   localCache data url   amp  amp    new Date   getTime   - localCache data url      lt  localCache timeout              get  function  url            console log  Getting in cache for url    url           return localCache data url  data             set  function  url  cachedData  callback            localCache remove url           localCache data url                     new Date   getTime                data  cachedData                    if    isFunction callback   callback cachedData               ajaxPrefilter function  options  originalOptions  jqXHR        if  options cache              Here is our identifier for the cache  Maybe have a better  safer ID  it depends on the object string representation here               on   ajax call we could also set an ID in originalOptions         var id   originalOptions url  JSON stringify originalOptions data           options cache   false          options beforeSend   function                  if   localCache exist id                     jqXHR promise   done function  data  textStatus                        localCache set id  data                                                 return true                           ajaxTransport       function  options  originalOptions  jqXHR  headers  completeCallback           same here  careful because options url has already been through jQuery processing     var id   originalOptions url  JSON stringify originalOptions data        options cache   false       if  localCache exist id             return               send  function  headers  completeCallback                    completeCallback 200   OK   localCache get id                               abort  function                         abort code  nothing needed here I guess                                             function          var url     echo jsonp            ajaxButton   click function  e              ajax               url  url              data                    test   value                             cache  true            done function  data  status  jq                console debug                   data  data                  status  status                  jqXHR  jq                                           Fiddle HERE Some issues  our cache ID is dependent of the json2 lib JSON object representation   Use Console view  F12  or FireBug to view some logs generated by the cache

[javascript] Caching a jquery ajax response in javascript/browser

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to caching

Examples related to browser