How do I cache data in Chrome Extension?

Question

I'm writing Chrome Extension for library that I work at. The extension fetches the latest book titles from library's API every time it's opened.

As it gets used by more and more people it's putting big load on library's servers who send API data.

What would be the way to cache data in a Chrome Extension?

For example, I'd like to get the data the first time Chrome Extension is opened, then save it (not sure where?), and only after 1 hour has passed do request to API and save data again.

Can someone recommend a way to do this in Chrome Extension?

Rudie · Accepted Answer · 2015-08-01T21:48:05.967

15

For local storage, use chrome.storage.local. It has a very simple API and 5 MB of storage per profile.

The permission is "storage" and it'll grant you access to chrome.storage.local and chrome.storage.sync. local is 5 MB per profile, saved on the client. sync is 100 KB, saved in the Google account. Same API.

I've found sync to be unreliable, but your needs seem to be local.

Usage:

function fetchLive(callback) {
  doSomething(function(data) {
    chrome.storage.local.set({cache: data, cacheTime: Date.now()}, function() {
      callback(data);
    });
  });
}

function fetch(callback) {
  chrome.storage.local.get(['cache', 'cacheTime'], function(items) {
    if (items.cache && items.cacheTime && items.cacheTime) {
      if (items.cacheTime > Date.now() - 3600*1000) {
        return callback(items.cache); // Serialization is auto, so nested objects are no problem
      }
    }

    fetchLive(callback);
  });
}

edited Aug 01 '15 at 21:48

answered Aug 01 '15 at 21:41

Rudie

52,220
42
131
173

Thanks @Rudie. What are some other options? I've never worked with local storage and it looks quite complicated. My contents will be about 100KB maximum per request. – bodacydo Aug 01 '15 at 21:42
I think I will use `chrome.storage.local` for this. I will try then tell you how it works. Then accept answer if it's all working. Thanks. – bodacydo Aug 01 '15 at 21:45
I've added an example for fetching from cache and live. – Rudie Aug 01 '15 at 21:49
2

`storage.local` quota can be lifted with `"unlimitedStorage"` permission – Xan Aug 02 '15 at 18:01
@Xan Docs say "This permission applies only to Web SQL Database and application cache", so no `storage.local` (yet?). – Rudie Aug 02 '15 at 19:18
1

@Rudie And the `chrome.storage` docs say about the `QUOTA_BYTES` limit: "This value will be ignored if the extension has the unlimitedStorage permission." – Xan Aug 02 '15 at 19:24
note that storage.sync works perfectly fine, its not unreliable. likely the one that answered didnt handle the required quota limitations. – Zig Mandel Aug 03 '15 at 13:43
@ZigMandel I found `sync` doesn't persist very often, and you can't force it. Very often hours after saving on PC 1, the change hadn't been downloaded to PC 2. Very annoying. Also very un-transparent, so can't see why (not). Storage limit was never an issue. – Rudie Aug 03 '15 at 15:47
@rudie ive never seen that. i use it on my extension which is used by lots of people. you just need to handle all the possible documented situations like the rate limit you just mentioned and fully documented. – Zig Mandel Aug 03 '15 at 16:29

How do I cache data in Chrome Extension?

1 Answers1

Linked