背景

这次分享我在项目中关于localStorage犯的两个小错误，由于我所做的功能点，被应用到了项目的核心模块中，所以这两个小错误，差点导致了整个项目上线后崩掉，现在想想都可怕~

真的，有些错误虽小，但是一定要杜绝啊~

一错：LocalStorage变量废弃

第一版

事情是这样的，我有一个需求，需要将一个url存进LocalStorage中

const  BASE_URL  =  'baseUrl'

//  存时
const  setUrlStorage  =  (url:  string)  =>  {
    Storage.set(BASE_URL,  url)
}

//  取时
const  getUrlStorage  =  ()  =>  {
    return  Storage.get(BASE_URL)
}

//  使用时
const  baseUrl  =  getUrlStorage()  ??  
                                'http://api.com'

并且这个代码上线了，用户也使用了这段代码的功能。。

第二版

后来，觉得直接存不太好，得加个时间戳，让这个url具有时效性，这时候我将代码改成了

const  BASE_URL  =  'baseUrl'
//  失效时间
const  TIME_OUT  =  60  *  60  *  1000
//  存时
const  setUrlStorage  =  (url:  string)  =>  {
    Storage.set(BASE_URL,  JSON.stringfy({
        url,
        //  添加时间
        time:  Date.now()
    }))
}

//  取时
const  getUrlStorage  =  ()  =>  {
    const  baseUrlObj  =  
                        Storage.get(BASE_URL)
    const  {  url,  time  }  =  
                        JSON.parse(baseUrlObj)
    //  判断是否失效
    if  (Date.now()  -  time  >=  TIME_OUT)  {
        return  null
    }  else  {
        return  url
    }
}

//  使用时
const  baseUrl  =  getUrlStorage()  ??  
                                'http://api.com'

问题来了

由于之前上线了第一版了，所以有的用户已经将url存在了LocalStorage中了，这时候存储中是

baseUrl  ->  'http://linsanxin.api.com'

但是后来我改成了第二版并且上线了，这个时候用户使用第二版的代码去取第一版中的存储，会导致报错

//  取时
const  getUrlStorage  =  ()  =>  {
    const  baseUrlObj  =  
                        Storage.get(BASE_URL)
    //  这里直接报错，取得是第一版的字符串
    //  JSON.stringfy  +  字符串  直接报错
    const  {  url,  time  }  =  
                        JSON.stringfy(baseUrlObj)
    //  ...coding
}

//  使用时
const  baseUrl  =  getUrlStorage()  ??  
                                'http://api.com'

改正：变量废弃

那么应该怎么改正呢？大家要注意一个点：

当LocalStorage中某个缓存，它的数据格式改变了，那么一定要废弃他的key，换一个新的

所以正确改正方法是，将baseUrl这个变量废弃了，换个新的

//  废弃  const  BASE_URL  =  'baseUrl'
const  BASE_URL  =  'baseUrlV2'

二错：JSON.parse无错误处理

由上一个错误，可以发现，在JSON.parse时进行错误处理，是非常重要的

注意：JSON.parse不止用在取LocalStorage时，还有其他很多使用场景

所以，每次JSON.parse时要做好错误的兜底处理，防止由于错误导致后面代码执行不下去

//  取时
const  getUrlStorage  =  ()  =>  {
    try  {
        const  baseUrlObj  =  
                        Storage.get(BASE_URL)
        const  {  url,  time  }  =  
                        JSON.stringfy(baseUrlObj)
        return  url
    }  catch(e)  {
        return  null
    }
}

来源：前端之神，作者：林三心

链接: https://fly63.com/article/detial/11749