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

Question

我有两个页面，1. x仪表板页面2. y仪表板页面。 x-dashboard具有表组件y-dashoard也具有具有不同数据的表组件。

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

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

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

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

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

Answer 1

您可以为每个组件设置一个键，其作用类似于存储在List<List<Double>> ret = IntStream.range(1, 10) .boxed() .flatMap(a -> IntStream.range(a, 10) .mapToObj(b -> Arrays.asList((double) a, (double) b, Math.sqrt(a * a + b * b)))) .collect(toList()); 中的数据的标识符。然后在每个组件的localStorage处，检查标识符是否与组件的标识符相同。

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

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

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)); } } 处调用initLocalStorage()的服务方法：

ngOnInit

我希望这会为您要构建的内容提供一个线索。

Answer 2

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