Как обращаться с локальным хранилищем асинхронным способом?

Question

В моем приложении для машинописи у меня есть два файла:

File 1 и File 2,

В то время как в File 1 я хотел бы сохранить значение в localstorageкак,

private load() {

return this.entityService
      .load(this.$scope.projectRevisionUid)
      .then(resp => {
        localStorage.removeItem('employeerates');
        this.$scope.employeeRates = resp.employeeRates;
        return this.refreshCostRate(...resp.employeeRates)
          .then(() =>
            localStorage.setItem(
              'employeerates',
              JSON.stringify(this.$scope.employeeRates)
            )
          )
      .then(() => this.refreshBillRate(...resp.employeeRates))
      .then(() => resp.employeeRates.forEach(erm => this.calculate(erm)))
      .then(() => DatepickerUtil.reinitializeDatepickers(this.$scope));
      })

}

В File 2, у меня есть следующее,

          const employeerates = JSON.parse(
            localStorage.getItem('employeerates')
          );

          if (employeerates && employeerates.length != null) {
            employeerates.forEach((element: any) => {
              if (
                this.employee.getUid() === element.user.personUid &&
                element.internalRate
              ) {
                this.cost_rate_uom = element.internalRate * this.uom_factor;
                this.cost_rate_per_hour =
                  this.cost_rate_uom / this.uom_factor;
                this.cost_rate.setValue(this.ap4_cost_rate_per_hour);
              }
            });
          }

Здесь установка localstorage в файле 1 является асинхронной, я не могу получить данные в нужное времяв File 2 ..

Пожалуйста, помогите мне добиться результата получения localalstorage в файле 2 без использования setTimeOut (потому что это не решает мою проблему, как я уже проверил).

Пожалуйста, помогитепередать значение локального хранилища из одного файла в другой, который является асинхронным.

Обновление:

Я не смог получить какой-либо другой способ передачи данных this.$scope.employeeRatesиз файла 1 в файл 2, для которого я использовал этот метод localstorage .. Так что после асинхронной функции this.refreshCostRate(...resp.employeeRates) мне нужно вызвать localalstorage, но перед этим сам мой файл 2 запускается, но над строкой this.refreshCostRate(...resp.employeeRates), если яустановить местное хранилище, то я получаю местное хранилище в фильe 2, но случай только после функции обновления, я получу точное значение.

Если вы предложите любой другой способ передачи данных из одного файла TS в другой файл TS, то это также будет полезно.После this.refreshCostRate(...resp.employeeRates) я получу точное значение this.$scope.employeeRates, которое мне нужно отправить на file 2 ..

Answer 1

Во-первых, я не уверен, какой фреймворк вы используете, хотя я действительно не знаю никаких фреймворков, которые бы мне все равно не помогли. Я думаю, что может сработать, чтобы код «file 1» отображал объект Promise, создаваемый каждый раз, когда необходимо обновить таблицу тарифов. Обычно считается «плохим» иметь глобальные переменные, и на самом деле он должен быть глобально достижимым . Пока код, выполняемый где-либо на странице, может его найти, этого достаточно; для примера я буду использовать глобальный.

Итак, в «файле 1» вы имеете:

    localStorage.removeItem('employeerates');
    this.$scope.employeeRates = resp.employeeRates;
    return this.refreshCostRate(...resp.employeeRates)
      .then(() =>
        localStorage.setItem(
          'employeerates',
          JSON.stringify(this.$scope.employeeRates)
        )
      )

Этот код очищает хранилище таблицы тарифов и запускает процесс для получения новых тарифов. Я предлагаю хранить обещание в глобальном масштабе:

    localStorage.removeItem('employeerates');
    this.$scope.employeeRates = resp.employeeRates;
    window.employeeRatesPromise = this.refreshCostRate(...resp.employeeRates)
      .then(() =>
        localStorage.setItem(
          'employeerates',
          JSON.stringify(this.$scope.employeeRates)
        )
      );
    return window.employeeRatesPromise;

Теперь в «file2» вы можете сделать все как .then() callback:

    if (window.employeeRatesPromise) {
      window.employeeRatesPromise.then(() => {
        const employeerates = JSON.parse(
          localStorage.getItem('employeerates')
        );

        if (employeerates && employeerates.length != null) {
          employeerates.forEach((element: any) => {
            if (
              this.employee.getUid() === element.user.personUid &&
              element.internalRate
            ) {
              this.cost_rate_uom = element.internalRate * this.uom_factor;
              this.cost_rate_per_hour =
              this.cost_rate_uom / this.uom_factor;
              this.cost_rate.setValue(this.ap4_cost_rate_per_hour);
            }
          });
        }
      else {
        // whatever makes sense when there's no data at all
      }

Если обновление таблицы тарифов завершено, глобальное обещание будет разрешено, и функция, переданная в .then(), запускается практически сразу. Это может происходить более одного раза на одном и том же объекте Promise. Однако, когда процесс обновления «файла 1» еще не завершен, код «файла 2» будет ожидать обновления локального хранилища. } }

Answer 2

Да, мы можем добиться с помощью прослушивателя событий изменения хранилища

window.addEventListener("storage", ()=>{alert("D")});

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/onChanged