前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心。oPr28資訊網(wǎng)——每日最新資訊28at.com

背景

這次分享我在項目中關(guān)于localStorage犯的兩個小錯誤，由于我所做的功能點，被應(yīng)用到了項目的核心模塊中，所以這兩個小錯誤，差點導(dǎo)致了整個項目上線后崩掉，現(xiàn)在想想都可怕~oPr28資訊網(wǎng)——每日最新資訊28at.com

真的，有些錯誤雖小，但是一定要杜絕啊~oPr28資訊網(wǎng)——每日最新資訊28at.com

一錯：LocalStorage變量廢棄

第一版

事情是這樣的，我有一個需求，需要將一個url存進(jìn)LocalStorage中oPr28資訊網(wǎng)——每日最新資訊28at.com

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'

并且這個代碼上線了，用戶也使用了這段代碼的功能。。oPr28資訊網(wǎng)——每日最新資訊28at.com

第二版

后來，覺得直接存不太好，得加個時間戳，讓這個url具有時效性，這時候我將代碼改成了oPr28資訊網(wǎng)——每日最新資訊28at.com

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'

問題來了

由于之前上線了第一版了，所以有的用戶已經(jīng)將url存在了LocalStorage中了，這時候存儲中是oPr28資訊網(wǎng)——每日最新資訊28at.com

baseUrl -> 'http://linsanxin.api.com'

但是后來我改成了第二版并且上線了，這個時候用戶使用第二版的代碼去取第一版中的存儲，會導(dǎo)致報錯oPr28資訊網(wǎng)——每日最新資訊28at.com

// 取時const getUrlStorage = () => {  const baseUrlObj =             Storage.get(BASE_URL)  // 這里直接報錯，取得是第一版的字符串  // JSON.stringfy + 字符串 直接報錯  const { url, time } =             JSON.stringfy(baseUrlObj)  // ...coding}// 使用時const baseUrl = getUrlStorage() ??                 'http://api.com'

改正：變量廢棄

那么應(yīng)該怎么改正呢？大家要注意一個點：oPr28資訊網(wǎng)——每日最新資訊28at.com

當(dāng)LocalStorage中某個緩存，它的數(shù)據(jù)格式改變了，那么一定要廢棄他的key，換一個新的oPr28資訊網(wǎng)——每日最新資訊28at.com

所以正確改正方法是，將baseUrl這個變量廢棄了，換個新的oPr28資訊網(wǎng)——每日最新資訊28at.com

// 廢棄 const BASE_URL = 'baseUrl'const BASE_URL = 'baseUrlV2'

二錯：JSON.parse無錯誤處理

由上一個錯誤，可以發(fā)現(xiàn)，在JSON.parse時進(jìn)行錯誤處理，是非常重要的oPr28資訊網(wǎng)——每日最新資訊28at.com

注意：JSON.parse不止用在取LocalStorage時，還有其他很多使用場景oPr28資訊網(wǎng)——每日最新資訊28at.com

所以，每次JSON.parse時要做好錯誤的兜底處理，防止由于錯誤導(dǎo)致后面代碼執(zhí)行不下去oPr28資訊網(wǎng)——每日最新資訊28at.com

// 取時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犯了兩個小錯誤，差點導(dǎo)致項目大崩潰！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 四款值得推薦的AI輔助編程工具

下一篇： JSON, Protobuf, Thrift和MessagePack的優(yōu)缺點對比