Question

在我的打字稿应用程序中，我有两个文件，

File 1和File 2

在File 1中，我想将值存储在本地存储中，

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中设置本地存储是异步的，我无法在正确的时间在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 ..

Answer 1

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

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

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

Answer 2

首先，我不确定您使用的是哪个框架，尽管我真的不知道任何反正对我没有帮助的框架。我认为可能对“文件1”代码起作用，以暴露每次需要更新费率表时创建的Promise对象。具有全局变量通常被认为是“不好的”，实际上，它只需全局地 reachable 即可。只要在页面中任何地方运行的代码都可以找到它，那就足够了；对于这个例子，我将使用全局变量。

因此，在“文件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”代码将等待本地存储被更新。 } }

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

2 个答案: