Imagine I have an application that showcases various restaurants in a specific city. With numerous listings, the data volume is substantial even without including any images.
If I aim to provide users with quick access to this data by implementing caching, my approach involves saving the data using ngStorage. I check for its existence - if present, I retrieve it from $localStorage; if not, I fetch the data from the database and set it in $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 method works effectively until images stored in the database as base64 are introduced.
Suddenly, the data size grows significantly, causing ngStorage to reach its limit and break. Moreover, downloading numerous images and storing them locally does not scale well.
Nevertheless, I still desire to cache this data to avoid querying the database each time it is required.
Is there a solution to efficiently cache such a large amount of data?