javascript - Angular - 使用 Base64 图像缓存数据

标签 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 达到极限并崩溃。此外,拉取大量图像并将其推送到本地存储中并不能很好地扩展。

但我仍然想缓存这些数据,以避免每次需要时都进行数据库调用。

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

最佳答案

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

我首先会考虑如何为应用程序加载数据,以确定您是否真的需要缓存这么多数据。您进行了多少次服务器调用来加载数据?您是发出一个请求来预先获取所有数据(即选定城市的所有餐厅)还是一次加载其中一些数据(即服务器一次请求 5 家餐厅)?

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

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

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

关于javascript - Angular - 使用 Base64 图像缓存数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42823208/

相关文章:

javascript - 将图像插入到 DOM,大小调整为其宽度/高度的 50%

javascript - iframe 移动响应

css - AngularJS Material 网络字体图标 (<md-icon>) 没有显示?

javascript - Angularjs 数据绑定(bind)不适用于类属性

c# - 使用 ASP.NET 清除缓存的最有效方法

caching - 高速缓存未命中,TLB未命中和页面错误

javascript - 在 jquery 请求中编辑全局变量

javascript - 选择 A 单选按钮以在 jquery/javascript 中添加另一个输入

javascript - 将 AngularJS 指令嵌入到另一个指令中

java - 理解hibernate一级缓存