local-storage: Caching a multi-page resource

Question

I'm trying to cache a multi page resource but localStorage.set() is only caching 4 pages out of 6. Has anyone had issues doing this? Caching all of these pages in memory works just fine but saving it to localStorage isn't working. Is there a limit that I don't know about? I'm testing with Chrome which has way more than enough space for what I'm storing.

var promises = [];
    var catalogItems = {
      partInfo: [],
      partNumbers: []
    };
    getCatalogItems(apiConfig.url + 'api/catalogItems?projection=detail')
      .success(function(res) {
        var pages = res.page.totalPages;

        catalogItems = updateCatalogItems(res._embedded.catalogItems, catalogItems);

        if (pages > 1) {
          for (var i = 1; i <= pages; i++) {
            promises.push(
              getCatalogItems(apiConfig.url + 'api/catalogItems?page=' + i + '&size=1000&projection=detail')
            );
          }

          $q.all(promises).then(function(response) {
            for (var j = 0; j < response.length; j++) {
              catalogItems = updateCatalogItems(response[j].data._embedded.catalogItems, catalogItems);
            }
            deferred.resolve(catalogItems);
          });
        } else {
          deferred.resolve(catalogItems);
        }
      })
      .error(function(err) {
        deferred.reject(err);
      });
  }
  return deferred.promise;
}

function updateCatalogItems(data, catalogItems) {
  data.forEach(function(item) {
    catalogItems.partInfo.push(item);
    catalogItems.partNumbers.push(item.itemNumber);
    item.formattedDate = moment(item.lastModifiedDate).local().format('MM/DD/YYYY');
    item.active = item.active ? 'Y' : 'N';
  });
  localStorageService.set('catalogItems', catalogItems);
  return catalogItems;
}

See [this answer](https://stackoverflow.com/a/48839090/5535245) for storage limits. — georgeawg, Aug 05 '18 at 17:10
The [`.success` and `.error` methods are deprecated](https://stackoverflow.com/questions/35329384/why-are-angularjs-http-success-error-methods-deprecated-removed-from-v1-6/35331339#35331339). The code uses a [deferred anti-pattern](https://stackoverflow.com/questions/30750207/is-this-a-deferred-antipattern). — georgeawg, Aug 05 '18 at 17:14

score 0 · Answer 1 · answered Apr 06 '18 at 21:42

0

localStorage has a limit on how much memory can be used. The limit tends to be around 10MB for most major browsers. The limit for Chrome is 5MB and can not be increased.

A possible solution is to create a service that works are your cache. You can store your data in there and use getter/setter functions to get/set the resource.

answered Apr 06 '18 at 21:42

BShaps

1,344
7
17

This is being done in a service. The way it is working now is I just use the service as the cache, storing the information in memory as you're describing. The average size of each page is 65KB and I'm only storing results from 6 pages. Other than that I just have a couple tokens being stored in localStorage so it seems like there should be plenty of room left. It works fine storing the results in memory. Are there any benefits to storing info in localStorage vs. in memory? – user6388353 Apr 09 '18 at 13:43

local-storage: Caching a multi-page resource

1 Answers1