绝大部分的场景你并不需要localStroage

前言

在实际业务开发中,有很多localStroage的使用场景,如:用户偏好设置、购物车信息、用户信息等等,如果只是把网站的主题色,就像使用暗黑还是明亮模式的信息存在localStroage里也还好,毕竟不涉及敏感信息,就像umi的官网一样,本地存储存了主题偏好、github stars这些信息。

或者是像掘金Web端,通过localStorage来保存用户的搜索历史作持久化。

这样即使我懂技术,把这个存储删了也无所谓,只是我的搜索历史被清了而已。

但在很多场景下,我发现会有同学把用户信息、ID、或者是会话鉴权的token存在localStroage中,这其实是很危险的技术方案。

处理方案

我们举个例子,例如有这样一段代码:

js 复制代码
  useRequest(getUserInfo, {
    onSuccess: (res) => {
      res?.success && localStorage.setItem('userInfo', res.data)
    }
  })

其实没啥问题,也很方便,拿用户信息也是一段代码就可以解决:

js 复制代码
localStorage.getItem('userInfo');

但有没有什么更好的方案?在满足方便的情况下,不要让用户信息暴露在浏览器中?其实用JavaScript原生的能力就很简单,我们把用户信息考虑存到应用的缓存中即可,缓存也并不是什么高科技,只要是一个对象,就可以实现缓存,我们在项目中新建一个文件,与页面组件隔离开,放在/src/common/cache.ts中,代码如下:

ts 复制代码
// 本文件存储需要在非React组件使用的数据
import { UserDto } from 'types/types';

interface Cache {
  user: UserDto;
}

const cache: Cache = {
  user: {
    userId: '',
    userName: '',
    userType: '',
    avatarUrl: '',
  },
};

export function setCache<T extends keyof Cache>(key: T, value: Cache[T]) {
  cache[key] = value;
}

export function getCache<T extends keyof Cache>(key: T) {
  return cache[key];
}

再改造一下最前面的版本代码:

ts 复制代码
useRequest(getUserInfo, {
    onSuccess: (res) => {
      res?.success && setCache('userInfo', res.data);
    }
  })

读起来也很方便,一段代码也可以解决,甚至还更少:

ts 复制代码
const user = getCache('userInfo');

并且这样有什么好处呢?

  1. 信息可控,存localStorage中,通常如果用户懂技术,把本地存储清掉,你的大部分业务都需要重新走一遍登录,甚至会给你的系统带来一些隐藏bug;
  2. 性能更好,基于内存的缓存读写速度很快,因为直接操作的是内存中的对象,而localStorage是基于磁盘的,速度会慢一些;
  3. 该内存缓存仅存活于页面生命周期内,页面刷新后会丢失,对于那些不需要持久化的数据来说,使用内存缓存更合理;
  4. 安全,可以避免XSS攻击;

但也有坏处,有些必要的持久化场景只能由localStorage,就比如最早说到的网站主题,如果需求是当用户退出网站,下次进来可以根据记忆化显示,那cache就无法满足,或是一些对时效性有要求的场景,我们都应该遵从本地存储,但在一些应用周期通常只会set一次,get多次的场景,就可以使用cache的方案。

如果喜欢我的文章或者想上岸大厂,可以关注公众号「量子前端」,将不定期关注推送前端好文、分享就业资料秘籍,也希望有机会一对一帮助你实现梦想。

相关推荐
旧林84322 分钟前
第八章 利用CSS制作导航菜单
前端·css
yngsqq34 分钟前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing1 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave1 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾2 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧2 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css