Angular - 使用base64图像缓存数据

时间:2017-03-16 00:26:07

标签: javascript angularjs caching local-storage ng-storage

假设我有一个应用程序列出了某个城市的餐馆。可以想象,可能有相当多的列表构成了大量的数据,而且没有任何图像。

现在假设我想让用户通过缓存来快速访问这些数据。我实现缓存的方法是简单地使用ngStorage存储数据,检查它是否存在..如果存在,我从$localStorage拉取范围,如果没有,我从数据库中获取数据并设置$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;

这可以正常工作,直到我将图像作为base64存储在我的数据库中。

突然之间,数据量显着增加,ngStorage满足限制&休息。此外,拉下大量图像并将其推入本地存储区并不能很好地扩展。

但是我仍然希望缓存这些数据,以避免每次需要时调用DB。

有没有办法缓存像这样的大量数据?

1 个答案:

答案 0 :(得分:1)

在这种情况下肯定需要考虑很多。

我首先会考虑如何为应用程序加载数据,以确定确实是否需要缓存这么多数据。您要加载数据的服务器调用数量是多少?您是否提出了一个预先获得所有数据的请求(即所选城市的所有餐厅),或者您是否一次加载了一些(即一次服务器请求5家餐馆)?

此外,您是否急切地加载或延迟加载数据(或两者的组合)?您是否预先要求提供一些数据,然后在后台加载更详细的数据?

在回答上述问题后,确定是否仍然需要大型缓存,或者是否可以重新加工数据的加载方式以避免缓存或坚持使用您已经提到过的较小的缓存机制,例如本地存储。

如果您仍然需要更大的缓存机制,我会考虑尝试缓存数据服务器端,这样您就不会经常查询数据库了。如果你必须在包括图像的客户端(浏览器)上缓存大量数据,我会考虑将图像存储为像IndexedDB这样的blob。