CODEWITHSUNDEEP
javascriptangularjscachinglocal-storageng-storage
yevg
yevg

Reputation: 1976

Angular - caching data with base64 images

Suppose I have an app that lists restaurants in a given city. As you can imagine there may be quite a few listings making up a sizable amount of data, and thats without any images.

Now suppose I want to give users quick access to this data by caching it. The way I implement my cache is by simply storing the data using ngStorage, checking if it exists.. if it does, I pull my scope from $localStorage, if not, I get the data from the DB and set the $localStorage. 

$scope.Restaurants = {};
if(Object.keys($localStorage.restaurants).length===0){ 

    $http.get('www.mydata.internet/RESTaurants').then(function(res){ // pardon the pun

        $localStorage.restaurants = res.data.restaurants;
        $scope.Restaurants = res.data.restaurants;

    });

} else $scope.Restaurants = $localStorage.restaurants;

This works fine until I store images in my DB as base64.

All of a sudden the amount of data grows significantly, ngStorage meets a limit & breaks. Also, pulling down tons of images and shoving them in local storage doesnt exactly scale well.

But I would still like to cache this data to avoid making DB calls every time its needed.

Is there some way to cache a large amount of data like this?

Upvotes: 0

Views: 1156

Answers (1)

Ben
Ben

Reputation: 2706

There is certainly a lot to consider in this scenario.

I would first consider how you're loading the data for your application to determine if you really need to cache this much data. How many server calls are you making to load the data? Are you making one request to get all the data up front (i.e. all the restaurants for a selected city) or do you load some of it a time (i.e. a server request for 5 restaurants at a time)?

Also, are you eagerly loading or lazily loading the data (or a combination of both)? Do you ask for some data up front initially and then load more detailed data in the background?

After answering the previous questions, determine if a need for a large cache is still there or if you can rework how the data is loaded to avoid caching or stick to a smaller caching mechanism you have already mentioned such as local storage.

If you are still in need for a larger caching mechanism, I would consider trying to cache data server side so you're not constantly querying your database(s). If you must cache large amounts of data on the client (browser) including images, I would consider looking into storing images as blobs in something like IndexedDB.

Upvotes: 1

Related Questions