如何在 Angular 中处理本地存储丢失的项目？

Posted 2023-03-05

【中文标题】如何在 Angular 中处理本地存储丢失的项目？

【英文标题】：How to handle local storage missing item in Angular?

【发布时间】：2021-07-04 06:37:11

【问题描述】：

我有一个函数可以在本地存储中保存一些值。在另一种方法中，从本地存储重新加载值。处理本地存储中丢失项目的最佳方法是什么？如果用户将其从本地存储中删除，或者它根本不存在。 获取和设置本地存储坐标的方法：

    get savedValues():  val1: number, val2: number, val3: number [] 
        if (localStorage.getItem('savedValues') === null) 
            console.log("null");
            return null;
        
        return JSON.parse(localStorage.getItem('savedValues'));
    

    set savedValues(value:  val1: number, val2: number, val3: number []) 
        localStorage.setItem('savedValues', JSON.stringify(value));
    

从本地存储重新加载坐标的方法：

    reload(): void 
        try 
            for (var i = 0; i < this.savedValues.length; i++) 
                this.oldValues[i].val1 = this.savedValues[i].val1;
                this.oldValues[i].val2 = this.savedValues[i].val2;
                this.oldValues[i].val3 = this.savedValues[i].val3;

            
        
        catch (Exception) 
            console.log("savedValuesitem is null in the local storage");
        
    

尝试从本地存储中捕获空字段异常的正确方法是什么？我也试过了

if (this.savedValues!== null) ...

但这似乎需要很长时间才能检查本地存储。

【参考方案1】：

尝试检查未定义：

if (this.savedCoordinates !== undefined) 
...

【参考方案2】：

我不会为此使用 try/catch，因为在本地存储中没有值并不是真正的错误，而只是正常/可能的行为。我会做一个简单的空检查：

reload(): void 
    if (this.savedCoordinates !== null) 
        for (var i = 0; i < this.savedCoordinates.length; i++) 
            this.nodes[i].x = this.savedCoordinates[i].x;
            this.nodes[i].y = this.savedCoordinates[i].y;
        
        return;
    

    console.log("savedCoordinates item is null in the local storage");
    return;

【讨论】：

@OP：此外，我刚刚意识到您使用 Angular - get/set 将运行它的更改检测，因此非常频繁 - 这可能是它需要这么长时间的原因。我建议只使用基本函数（getCoordinates 和 getCoordinates）来设置和获取值（只有在你调用它们时才会运行）。

【参考方案3】：

你应该只检查一次本地存储：

    reload(): void 
   
        let coordinates=this.savedCoordinates;
        if (coordinates == null) 
         ...
        
        else
         for (var i = 0; i < coordinates; i++) 
            this.nodes[i].x = coordinates[i].x;
            this.nodes[i].y = coordinates[i].y;