我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
  }
}
责任编辑:武晓燕 来源: 前端之神
相关推荐

2011-07-03 20:38:33

SEO

2015-03-04 14:16:39

Web开发小错误致命错误

2017-09-27 16:38:51

2011-06-19 12:43:55

SEO

2015-06-03 13:54:37

JavaScript小错误

2016-10-18 10:55:03

java调试问题

2019-03-15 14:21:02

互联网数据技术

2016-03-17 16:57:39

SaaSSaaS公司指标

2012-09-20 09:24:36

编程学习编程开发

2013-06-19 09:49:28

编程学习

2020-07-01 07:38:38

SQL数据库程序员

2012-09-10 09:43:21

编程编程学习编程错误

2011-05-04 09:05:52

网络崩溃错误连接DHCP

2020-09-16 12:51:40

Windows 10更新微软

2011-05-31 15:38:37

CSS

2010-05-28 09:57:50

TortoiseSVN

2022-09-20 10:22:00

CIOIT业务管理者

2014-01-06 17:09:17

App开发移动开发

2010-05-24 09:11:13

Facebook隐私政策

2022-06-17 09:46:51

Chrome 102Chrome浏览器
点赞
收藏

51CTO技术栈公众号