我LocalStorage犯了兩個(gè)小錯(cuò)誤，差點(diǎn)導(dǎo)致項(xiàng)目大崩潰！
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心。
背景
這次分享我在項(xiàng)目中關(guān)于localStorage犯的兩個(gè)小錯(cuò)誤，由于我所做的功能點(diǎn)，被應(yīng)用到了項(xiàng)目的核心模塊中，所以這兩個(gè)小錯(cuò)誤，差點(diǎn)導(dǎo)致了整個(gè)項(xiàng)目上線后崩掉，現(xiàn)在想想都可怕~
真的，有些錯(cuò)誤雖小，但是一定要杜絕啊~
一錯(cuò)：LocalStorage變量廢棄
第一版
事情是這樣的，我有一個(gè)需求，需要將一個(gè)url存進(jìn)LocalStorage中
const BASE_URL = 'baseUrl'
// 存時(shí)
const setUrlStorage = (url: string) => {
Storage.set(BASE_URL, url)
}
// 取時(shí)
const getUrlStorage = () => {
return Storage.get(BASE_URL)
}
// 使用時(shí)
const baseUrl = getUrlStorage() ??
'http://api.com'并且這個(gè)代碼上線了，用戶也使用了這段代碼的功能。。
第二版
后來，覺得直接存不太好，得加個(gè)時(shí)間戳，讓這個(gè)url具有時(shí)效性，這時(shí)候我將代碼改成了
const BASE_URL = 'baseUrl'
// 失效時(shí)間
const TIME_OUT = 60 * 60 * 1000
// 存時(shí)
const setUrlStorage = (url: string) => {
Storage.set(BASE_URL, JSON.stringfy({
url,
// 添加時(shí)間
time: Date.now()
}))
}
// 取時(shí)
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
}
}
// 使用時(shí)
const baseUrl = getUrlStorage() ??
'http://api.com'問題來了
由于之前上線了第一版了，所以有的用戶已經(jīng)將url存在了LocalStorage中了，這時(shí)候存儲(chǔ)中是
baseUrl -> 'http://linsanxin.api.com'但是后來我改成了第二版并且上線了，這個(gè)時(shí)候用戶使用第二版的代碼去取第一版中的存儲(chǔ)，會(huì)導(dǎo)致報(bào)錯(cuò)
// 取時(shí)
const getUrlStorage = () => {
const baseUrlObj =
Storage.get(BASE_URL)
// 這里直接報(bào)錯(cuò)，取得是第一版的字符串
// JSON.stringfy + 字符串 直接報(bào)錯(cuò)
const { url, time } =
JSON.stringfy(baseUrlObj)
// ...coding
}
// 使用時(shí)
const baseUrl = getUrlStorage() ??
'http://api.com'改正：變量廢棄
那么應(yīng)該怎么改正呢？大家要注意一個(gè)點(diǎn)：
當(dāng)LocalStorage中某個(gè)緩存，它的數(shù)據(jù)格式改變了，那么一定要廢棄他的key，換一個(gè)新的
所以正確改正方法是，將baseUrl這個(gè)變量廢棄了，換個(gè)新的
// 廢棄 const BASE_URL = 'baseUrl'
const BASE_URL = 'baseUrlV2'二錯(cuò)：JSON.parse無錯(cuò)誤處理
由上一個(gè)錯(cuò)誤，可以發(fā)現(xiàn)，在JSON.parse時(shí)進(jìn)行錯(cuò)誤處理，是非常重要的
注意：JSON.parse不止用在取LocalStorage時(shí)，還有其他很多使用場(chǎng)景
所以，每次JSON.parse時(shí)要做好錯(cuò)誤的兜底處理，防止由于錯(cuò)誤導(dǎo)致后面代碼執(zhí)行不下去
// 取時(shí)
const getUrlStorage = () => {
try {
const baseUrlObj =
Storage.get(BASE_URL)
const { url, time } =
JSON.stringfy(baseUrlObj)
return url
} catch(e) {
return null
}
}
