我LocalStorage犯了兩個小錯誤，差點導致項目大崩潰！
作者：林三心不學挖掘機
我在項目中關于localStorage犯的兩個小錯誤，由于我所做的功能點，被應用到了項目的核心模塊中，所以這兩個小錯誤，差點導致了整個項目上線后崩掉，現在想想都可怕~
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心。
背景
這次分享我在項目中關于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
}
}責任編輯：武曉燕
來源：
前端之神
