大家好,我是林三心,用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初心。
這次分享我在項目中關于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不止用在取LocalStorage時,還有其他很多使用場景
所以,每次JSON.parse時要做好錯誤的兜底處理,防止由于錯誤導致后面代碼執行不下去
// 取時const getUrlStorage = () => { try { const baseUrlObj = Storage.get(BASE_URL) const { url, time } = JSON.stringfy(baseUrlObj) return url } catch(e) { return null }}
本文鏈接:http://www.tebozhan.com/showinfo-26-84585-0.html我LocalStorage犯了兩個小錯誤,差點導致項目大崩潰!
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 四款值得推薦的AI輔助編程工具