Angular-使用base64圖像緩存數據

Question

假設我有一個列出指定城市中餐館的應用程序。 可以想象，可能有很多清單構成了相當數量的數據，那就是沒有任何圖像。

現在，假設我想通過緩存將數據提供給用戶快速訪問。 我實現緩存的方法是簡單地使用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達到極限並中斷。 此外，將大量圖像拖入本地存儲中並不能很好地擴展。

但是我仍然想緩存這些數據，以避免每次需要時都進行數據庫調用。

有沒有辦法像這樣緩存大量數據？

Answer 1

在這種情況下，肯定有很多要考慮的因素。

首先，我將考慮如何為應用程序加載數據，以確定是否真的需要緩存這么多的數據。 您要進行多少次服務器調用才能加載數據？ 您是在發出一個要求獲取所有數據的請求（即選定城市的所有餐館）還是一次加載（即服務器一次請求5個餐館的請求）？

另外，您是急於加載還是延遲加載數據（或兩者結合）？ 您是否首先要求一些數據，然后在后台加載更詳細的數據？

在回答了前面的問題之后，請確定是否仍然需要大容量緩存，或者是否可以重新設計如何加載數據以避免緩存或堅持使用您已經提到的較小的緩存機制（例如本地存儲）。

如果仍然需要更大的緩存機制，我會考慮嘗試緩存數據服務器端，這樣您就不會不斷查詢數據庫了。 如果必須在客戶端（瀏覽器）上緩存大量數據（包括圖像），我會考慮將圖像作為blob存儲在諸如IndexedDB之類的文件中 。