前言
大家好，我是林三心， 用最通俗易懂的話講最難的知識點 是我的座右銘， 基礎是進階的前提 是我的初心。
背景
這次分享我在計畫中關於
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
}
}
結語
點個【贊】和【在看】是對林三心最大的鼓勵，林三心會非常開心的~~~
關註公眾號【前端之神】，回復【加群】，即可獲得加入【千人前端學習大群】的
