How to cache data in JavaScript for non-sequential shifting range?

Question

Edit: 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. End Edit

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.

A crude, overly simplified example is here:

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 < cache.rangeLow || high > 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;
};

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.

What (better, efficient) mechanism or algorithm can I use to store cached information and determine whether my current displayed range is in the cache?

Thanks very much, Jim

Answer 1

You seem to have "chunks" of data with a range of 10 objects each. Calculate how many of these chunks you can store in your cache, let's call this cache_size. Now you can use a list of chunks you have in your cache, f.e. for cache_size 4:

20-29
0-9
40-49
30-39

It will be a bit more complicated this way to maintain this list and to check if a certain object is in the cache, but I think it's worth the effort.

You might also think about keeping a time or date index with each chunk to determine when an object from it was retrieved the last time so when your cache is full and you'll have to discard a cached chunk, you can discard the oldest.