如何在其他组件中使用 sessionStorage.clear() ？

Question

我使用 Angular 4 并在我的 sessionStorage 项目组件中填充一些过滤数据，以便在我的浏览器会话期间存储它们。我还有另一个名为 navbar 的组件，其方法类似于 logout()。现在，如果我单击 logout()。

，我想清除 sessionStorage 中的过滤器

我在我的 navBar 组件中试过这个：

logout (): void {
  sessionStorage.clear();
}

我也尝试在我的projectComponent中实现这个：

import { Component, OnInit, Injectable } from '@angular/core';
...
public deleteFilter(){
  sessionStorage.clear();
}

并将其放入 navbarComponent 构造函数中：

private project: Projects;

并在我的 navbarComponent 注销方法中使用函数调用让项目删除会话项。

logout (): void {
  this.project.deleteFilter();
}

但如果我注销并登录，过滤器仍会被存储。我可以直接在浏览器中删除它们，方法是按 f12 =>“应用程序”=>“清除存储”

有人可以帮我吗？

Answer 1

您可以简单地创建一个 Angular service,

服务看起来像这样

import { Injectable } from '@angular/core';

@Injectable()
export class StorageService {
  constructor() {}

  public clear() {
    sessionStorage.clear();
  }
}

用法#1

import { Component, VERSION } from '@angular/core';
import { StorageService } from './storage.service';

@Component({
  selector: 'usage1',
  templateUrl: './usage1.component.html',
  styleUrls: ['./usage1.component.css']
})
export class Usage1Component {
  constructor(private storageService: StorageService) {
    // You can use the method like this
    this.storageService.clear();
  }
}

用法#2

import { Component, Input } from '@angular/core';
import { StorageService } from './storage.service';

@Component({
  selector: 'usage2',
  templateUrl: './usage2.component.html',
  styleUrls: ['./usage2.component.css']
})
export class Usage2Component {
  @Input() name: string;
  constructor(private storageService: StorageService) {
    // You can use the method like this
    this.storageService.clear();
  }
}

如何在其他组件中使用 sessionStorage.clear() ？

how to use sessionStorage.clear() in other component?

session-storage

angular