如何以异步方式处理本地存储？

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

这里在文件1中设置localstorage是异步的，我无法在正确的时间在File 2获取数据。

请帮助我在不使用setTimeOut的情况下获得在文件2中获取本地存储的结果（因为它无法解决我的问题，因为我已经检查过）。

请帮助我将localstorage值从一个文件传递到另一个异步文件。

更新：

我没有其他方法可以将数据this.$scope.employeeRates从文件1传递到文件2，为此我使用了此localstorage方法。因此，在异步函数之后this.refreshCostRate(...resp.employeeRates)我需要调用localstorage，但在此之前它本身是我的文件2运行的地方，但在代码行this.refreshCostRate(...resp.employeeRates)上方，如果我设置了localstorage，那么我将在文件2中获取localstorage，但是这种情况是刷新功能后，只有我将获得确切的值。

如果您建议将数据从一个ts文件传递到另一个ts文件的任何其他方式，那么它也将有所帮助。.在this.refreshCostRate(...resp.employeeRates)我将获得此值this.$scope.employeeRates我需要发送到file 2 this.$scope.employeeRates ..

Answer 1

是的，我们可以使用存储更改事件侦听器来实现

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

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

Answer 2

首先，我不确定您使用的框架是什么，尽管我真的不知道任何框架都不会对我有帮助。 我认为可能对“文件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)
        )
      )

该代码将清除费率表存储并开始获取新费率的过程。 我建议将Promise存储在全球范围内：

    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()回调：

    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
      }

如果费率表更新已完成，则将解决全局Promise，传递给.then()的函数基本上会立即运行。 在同一个Promise对象上可能会发生多次。 但是，当“文件1”更新过程仍未完成时，“文件2”代码将等待本地存储被更新。 }}