前言
大家好，我是林三心， 用最通俗易懂的话讲最难的知识点 是我的座右铭， 基础是进阶的前提 是我的初心。
背景
这次分享我在项目中关于
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) {
returnnull
} 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) {
returnnull
}
}
结语
点个【赞】和【在看】是对林三心最大的鼓励，林三心会非常开心的~~~
关注公众号【前端之神】，回复【加群】，即可获得加入【千人前端学习大群】的
