local-storage:缓存多页资源

Question

我正在尝试缓存一个多页面资源，但是localStorage.set()只缓存了6个页面中的4个。有人在这样做时遇到过问题吗？在内存中缓存所有这些页面可以很好地工作，但将其保存到localStorage则不起作用。有没有我不知道的限制？我正在使用Chrome进行测试，它有足够的空间来存储我存储的内容。

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;
}

Answer 1

localStorage对可以使用的内存量有限制。对于大多数主流浏览器，这一限制往往在10MB左右。Chrome的限制是5MB，不能增加。

一种可能的解决方案是创建一个在缓存中工作的服务。您可以将数据存储在其中，并使用getter/setter函数来获取/设置资源。