title: How to cache data in JavaScript for non-sequential shifting range?
body: <p><strong>Edit:</strong> For simplicity, and in order to try and make this question and the sample code more generic, I left out a detail. A detail which, in light of one of the responses (which was great), turns out to be important. This system will be used primarily to show things within a date range. The low/high numbers in the code will often represent Unix timestamps the range of which could span weeks or months. <strong>End Edit</strong></p>
  
  <p>I have a page where I provide a view of data objects which have properties that fall within a certain range. As the user interacts with the view to change it, it generally is a sequential change to the range (0-9, 10-19...). I am retrieving this data from the server, and as it comes in I cache it such that a subsequent request for data in that range is already available. On each read of the data, I first check to see if I have the cache data, and if not I read it from the server and adjust the cache.</p>
  
  <p>A crude, overly simplified example is here:</p>
  
  <pre><code>var cache, haveCache, read;
  
  cache = {
      rangeLow: 0,
      rangeHigh: 10,
      data: [
          //whatever has been read so far between current low and high
          {
              low: 1,
              high: 3,
              // ...other props
          },
          {
              low: 5,
              high: 6,
              // ...other props
          },
          //...
      ]
  };
  
  haveCache = function( low, high )
  {
      return ! ( low &lt; cache.rangeLow || high &gt; cache.rangeHigh );
  };
  
  read = function( low, high )
  {
      var data;
  
      if( ! haveCache( low, high ) )
      {
          //go to outside source and read in info , then merge to cache
          //
          // when merging to cache:
          //    if `low` param is lower than `cache.rangeLow`, overwrite cache.rangeLow with `low`
          //    if `high` param is higher than `cache.rangeHigh`, overwrite `cache.rangeHigh` with `high`
      }
  
      //read data from cache
  
      return data;
  };
  </code></pre>
  
  <p>This works great as long as the change in range really is sequential. However, I realized there is a way to change the view non-sequentially and skip a large set of values. So Let's say I am currently showing for ranges 10-19, and I have a cache holding for ranges 0-29. Then the user asks for a view of data for range 60-69. The way it currently works, I'll ask the server for data and get it back and present it fine. But now the cache rangeLow and rangeHigh run from 0-69 while it only actually holds data for ranges 0-29 and 60-69. Items with properties ranging 30-59 are not in the cache and will never be retrieved.</p>
  
  <p>What (better, efficient) mechanism or algorithm can I use to store cached information and determine whether my current displayed range is in the cache?</p>
  
  <p>Thanks very much,
  Jim</p>