我LocalStorage犯了两个小错误，差点导致项目大崩溃！

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。YJJ28资讯网——每日最新资讯28at.com

背景

这次分享我在项目中关于localStorage犯的两个小错误，由于我所做的功能点，被应用到了项目的核心模块中，所以这两个小错误，差点导致了整个项目上线后崩掉，现在想想都可怕~YJJ28资讯网——每日最新资讯28at.com

真的，有些错误虽小，但是一定要杜绝啊~YJJ28资讯网——每日最新资讯28at.com

一错：LocalStorage变量废弃

第一版

事情是这样的，我有一个需求，需要将一个url存进LocalStorage中YJJ28资讯网——每日最新资讯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'

并且这个代码上线了，用户也使用了这段代码的功能。。YJJ28资讯网——每日最新资讯28at.com

第二版

后来，觉得直接存不太好，得加个时间戳，让这个url具有时效性，这时候我将代码改成了YJJ28资讯网——每日最新资讯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'

问题来了

由于之前上线了第一版了，所以有的用户已经将url存在了LocalStorage中了，这时候存储中是YJJ28资讯网——每日最新资讯28at.com

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

但是后来我改成了第二版并且上线了，这个时候用户使用第二版的代码去取第一版中的存储，会导致报错YJJ28资讯网——每日最新资讯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'

改正：变量废弃

那么应该怎么改正呢？大家要注意一个点：YJJ28资讯网——每日最新资讯28at.com

当LocalStorage中某个缓存，它的数据格式改变了，那么一定要废弃他的key，换一个新的YJJ28资讯网——每日最新资讯28at.com

所以正确改正方法是，将baseUrl这个变量废弃了，换个新的YJJ28资讯网——每日最新资讯28at.com

// 废弃 const BASE_URL = 'baseUrl'const BASE_URL = 'baseUrlV2'

二错：JSON.parse无错误处理

由上一个错误，可以发现，在JSON.parse时进行错误处理，是非常重要的YJJ28资讯网——每日最新资讯28at.com

注意：JSON.parse不止用在取LocalStorage时，还有其他很多使用场景YJJ28资讯网——每日最新资讯28at.com

所以，每次JSON.parse时要做好错误的兜底处理，防止由于错误导致后面代码执行不下去YJJ28资讯网——每日最新资讯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.28at.com/showinfo-26-84585-0.html我LocalStorage犯了两个小错误，差点导致项目大崩溃！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 四款值得推荐的AI辅助编程工具

下一篇： JSON, Protobuf, Thrift和MessagePack的优缺点对比