What's the best way use caching data in js on client side?

Question

My application receives data from the another server, using API with limited number of requests. Data changing rarely, but may be necessary even after refresh page.

1. What's the best solution this problem, using cookie or HTML5 WebStorage?
2. And may be have other way to solve this task?

Answer 1

As much as cross browser compatibility matters, cookie is the only choice rather than web storage.

But the question really depends on what kind of data you are caching?

For what you are trying, cookie and web-storage might not be needed at all.

• Cookies are used to store configuration related information, rather than actual data itself.
• Web storage supports persistent data storage, similar to cookies but with a greatly enhanced capacity and no information stored in the HTTP request header. ^[1]

I would rather say, it would be stupid to cache the entire page as cookie or web-storage both. For these purposes, server-side caching options might be the better way.

Update:

Quoting:

data about user activity in some social networks (fb, vk, google+)

Detect the web-storage features, using libraries like mordernizr and if does not exists fall back to cookie method. A simple example

if (Modernizr.localstorage) {
    // browser supports local storage
    // Use this method
} else {
    // browser doesn't support local storage
    // Use Cookie Method
}

---

[1]: http://en.wikipedia.org/wiki/Web_storage

Answer 2

I wrote this lib to solve the same problem:

Cache your data with Javascript using cacheJS

Here are some basic usages

// just add new cache using array as key
cacheJS.set({blogId:1,type:'view'},'<h1>Blog 1</h1>');
cacheJS.set({blogId:1,type:'json'}, jsonData);

// remove cache using key
cacheJS.removeByKey({blogId:1,type:'json'});


// add cache with ttl and contextual key
cacheJS.set({blogId:2,type:'view'},'<h1>Blog 2</h1>', 3600, {author:'hoangnd'});

cacheJS.set({blogId:3,type:'view'},'<h1>Blog 3</h1>', 3600, {author:'hoangnd'});


// remove cache with con textual key
// cache for blog 2 and 3 will be removed
cacheJS.removeByContext({author:'hoangnd'})

Answer 3

Here is an example of caching data from JQuery AJAX. So if you only want to make the call when you don't have the data yet, its really simple. just do this (example). Here we first check if we have the load information (keyed on line, location and shipdate), and only if we dont, we make the AJAX call and put that data into our cache:

var dict = [];

function checkCachedLoadLine(line, location, shipDate, callback) {
    var ret = 0;
    if(!((line+location+shipDate) in dict)) {
        productionLineService.getProductionLoadLine(line, location, shipDate, callback);
    }
    return dict[line+location+shipDate];
}

...then in the call back write the value to the cache

function callback(data) {
    if (!data) {
        document.getElementById('htmlid').innerHTML = 'N/A';
    } else {
        document.getElementById('htmlid').innerHTML = data[0];
        dict[data[2]+data[3]+data[4]] = data[0];
    }
}