如何缓存或存储从$http调用响应返回的项目文件夹JSON对象？AngularJS

Question

我编写了Google扩展，现在我需要缓存或存储从$http调用响应返回的项目文件夹JSON对象。我使用的是没有服务器的透明AngularJS。

我尝试使用这个解决方案：https://coderwall.com/p/40axlq/power-up-angular-s-http-service-with-caching，但是我没有服务器(我不需要它)

控制器(请参阅第一个get请求)：

var deliveryApp = angular.module('deliveryApp', []);

deliveryApp.controller('optimalDuration', ['$scope', '$http', function ($scope, $http) {

    $http.get('https://tk-kit.ru/API.1/?f=get_city_list').success(function (data, status, headers, config) {
    $scope.citiesTkKit = data;
    // var blob = new Blob([JSON.stringify(data)],  {type: 'text/json'});
    // saveAs(blob, 'testFile.json');
    });

    $scope.info_show = '';
    $scope.save = function (form) {
    $scope.info_show = null;
    $http.get('https://tk-kit.ru/API.1/?f=price_order&WEIGHT=' + $scope.weight + '&LENGTH=' + $scope.length + '&WIDTH=' +
        $scope.wiidth + '&HEIGHT=' + $scope.heeight + '&SZONE=' + $scope.selected_city_from + '&RZONE=' + $scope.selected_city_to +
        '&PRICE=' + $scope.price)
        .success(function (data, status) {
            $scope.info_show = 'Доставим ваш груз за ' + data['DAYS'] + ' суток. С уважением, транспортная компания tk-kit!';
            console.log(data);
        });
    }
}]);

我也尝试使用FileSaver.js并注释部分代码更高的作品，但是只在浏览器下载文件夹中保存文件.

HTML：

<div class="container">

<form name="sendForm" ng-submit="save($element.action)">
    <input type="text" ng-model="search1" placeholder="Введите город">
    <select name="cityFrom" ng-model="selected_city_from">
        <option ng-repeat="city in citiesTkKit['CITY'] | filter:search1" value="{{city['TZONEID']}}">{{city['NAME']}}
        </option>
    </select>
    <hr>
    <input type="text" ng-model="search2" placeholder="Введите город">
    <select name="cityTo" ng-model="selected_city_to">
        <option ng-repeat="city in citiesTkKit['CITY'] | filter:search2" value="{{city['TZONEID']}}">{{city['NAME']}}
        </option>
    </select>
    <hr>
    <input type="text" ng-model="weight" placeholder="Вес товара в кг.">
    <input type="text" ng-model="length" placeholder="Длина товара">
    <input type="text" ng-model="wiidth" placeholder="Ширина">
    <input type="text" ng-model="heeight" placeholder="Высота">
    <input type="text" ng-model="price" placeholder="Объявленная стоимость груза">
    <button type="submit">Вычислить оптимальное время</button>
</form>

<h5>{{info_show}}</h5>
</div>

主要的问题是，我需要等待5-7秒才能在我的选择列表中看到选项，并且我希望加快这个过程。

UPD我找到了问题的根源。转换为文件并下载从get请求接收到的JSON数据，然后使用另一个url (文件路径)创建新的get-请求，加载的选择列表还不到一秒钟。但由于浏览器安全限制，我无法将此文件下载到我的项目文件夹中。我尝试将响应JSON包含到localStorage：localStorage.setItem('cities', citiesJSON)，但是它也有同样的问题，时间太长了:(我如何存储响应JSON数据以加快我的进程？

Answer 1

Chrome扩展有一个存储API，可以在浏览器中本地存储数据，或者通过用户的Google帐户同步数据。

您需要在您的清单中请求对storage的许可。

"permissions": [
    "storage"
],

然后，您可以将数据同步到它：

chrome.storage.sync.set({'value': theValue}, function() {
    // Notify that we saved.
    message('Settings saved');
});