如果组件不是当前组件，如何删除本地存储 - 角度

Question

我有两个页面，1. x-dashboard 页面 2. y-dashboard 页面。 x-dashboard 有一个表格组件 y-dashoard 也有一个包含不同数据的表格组件。

现在，我创建了一个通用过滤器组件，当用户单击 x 或 y 页面内的过滤器图标时，我将在基于表格列的弹出窗口中动态显示过滤器选项。

用户输入一些过滤器并单击应用后，我将把过滤器值存储在本地存储中（逻辑在过滤器组件内部），并根据订阅者在相应页面（x 或 y 页面）内访问该值。

当您使用链接从 xpage 导航到 ypage 时，我正在清除 ngdestroy 上的本地存储密钥。这样下一页就不会从本地存储中获取相同的过滤器参数。

但是当我输入 url（通过路由导航）时，ngdestroy 没有调用，并且 x 页面中的 localstorage（过滤参数）设置显示在 y 页面中。

如果我清除页面加载，那么当用户刷新时，他将丢失过滤的参数。这个问题怎么解决？

Answer 1

您可以向保存在 localStorage 中的对象（过滤器对象）添加另一个属性，例如 page: 'pageY' 或 page: 'pageX'，然后在 ngOnLoad() 中检查当前页面是否匹配该属性，你使用它，否则你删除它。

Answer 2

您可以为每个组件设置一个键，该键的作用类似于存储在localStorage 中的数据的标识符。并在每个组件的ngOnInit，检查标识符是否与组件相同。

我在这里创建了一个堆栈闪电战：https://stackblitz.com/edit/angular-oryk5z

首先，我为要存储在localStorage 中的项目创建了一个模型：

export class LocalStorageItem{
  last_component: string;
  id: number;
  row: number;
  whatever: string;

  static fromJSON = (jsonValue: string): LocalStorageItem => {

    const newItem = new LocalStorageItem();
    if(jsonValue !== null){
      const parsedJSON = JSON.parse(jsonValue);
      newItem.last_component = parsedJSON['last_component'];
      newItem.id = parsedJSON['id'];
      newItem.row = parsedJSON['row'];
      newItem.whatever = parsedJSON['whatever'];
    }
    return newItem;
  }

}

然后我创建了一个负责存储操作的服务。在initLocalStorage() 方法中，该服务将组件的标识符作为参数，并检查存储项的标识符是否相同。如果没有，它会创建一个带有标识符的新项目。

export class LocalStorageService {

  readonly filterStorageKey = 'component_storage_key'

  constructor() { }

  initLocalStorage = (storageKey: string) => {

    var storedItem = LocalStorageItem.fromJSON(localStorage.getItem(this.filterStorageKey));



    if (storedItem === null || (storedItem.last_component !== storageKey)) { // if no value is stored / store is empty
      const newStoreItem = new LocalStorageItem();
      newStoreItem.last_component = storageKey;
      this.setLocalStorage(newStoreItem);

    }
    storedItem = LocalStorageItem.fromJSON(localStorage.getItem(this.filterStorageKey)); // this line is for debug purposes
    return storedItem;

  }

  getLocalStorage = () => {
    return LocalStorageItem.fromJSON(localStorage.getItem(this.filterStorageKey));
  }

  setLocalStorage = (item: LocalStorageItem) =>{
    localStorage.setItem(this.filterStorageKey, JSON.stringify(item));
  }

}

然后在每个组件中，使用该组件的存储标识符在ngOnInit 调用initLocalStorage() 服务方法：

export class YDashboardComponent implements OnInit, ILocalStorageManager { // This interface is to be sure that the component defines storageKey property

  readonly storageKey = 'y-dashboard';
  storedItemFromService;
  constructor(private localStorageService: LocalStorageService) { }

  ngOnInit() {
    this.storedItemFromService = this.localStorageService.initLocalStorage(this.storageKey);
  }

}

我希望这将为您提供有关您要构建的内容的线索。