时间戳

首页 > 解决方案 > 在Angular 6中单击浏览器的后退按钮时如何避免API调用？

angular6 - 在Angular 6中单击浏览器的后退按钮时如何避免API调用？

问题描述

例如：

“我正在从页面 A 导航到页面 B。在页面 BI 上单击了浏览器的后退按钮，这应该让我回到页面 A，但我需要通过单击浏览器的后退按钮来避免对页面 A 的 API 调用。”

标签： angular6

解决方案

如果您指的是“由于加载页面 A 的 JavaScript 而发送的 API 调用”，那么您将希望利用localStorage跨页面加载将信息保存在浏览器中。要实现这一点，您必须提供localStorage在调用数据 API 之前检查“缓存”信息的逻辑。这样，如果您的用户点击浏览器上的后退按钮，JavaScript 将检查是否已有来自 API 的数据localStorage，然后跳过进行 API 调用。

注意：如果要清除“缓存”数据，则需要localStorage.clear()或删除该项目。localStorage.removeItem('itemKey')此逻辑将取决于您的用例。

一个例子如下：

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html'
})
export class HeroListComponent implements OnInit {

  constructor(private heroService: HeroService) {}

  ngOnInit() {
    if (!window.localStorage.getItem('myData')) {
      this.heroService.loadData().subscribe(
        (data) => window.localStorage.setItem('myData', JSON.stringify(data))
      );
    } else {
      // Load the data by parsing the stored JSON string:
      // const data = JSON.parse(window.localStorage.getItem('myData'))
    }
  }
}

推荐阅读