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

Question

我编写了 Google Chrome 扩展程序，现在我需要缓存或存储从 $http 调用响应返回的项目文件夹 JSON 对象。我正在使用没有服务器的 clear 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 秒才能看到 SELECT 列表中的选项，我想加快这个过程。

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

Answer 1

Chrome 扩展程序有一个Storage API，可以在浏览器本地存储数据或在用户的 Google 帐户之间同步数据。

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

"permissions": [
    "storage"
],

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

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