绝大部分的场景你并不需要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的方案。

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

相关推荐
独立开阀者_FwtCoder几秒前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806915 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说36 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥37 分钟前
JavaScript之数组方法详解
javascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
叹一曲当时只道是寻常1 小时前
Softhub软件下载站实战开发(十六):仪表盘前端设计与实现
前端·golang
超级土豆粉1 小时前
npm 包 scheduler 介绍
前端·npm·node.js
bug爱好者1 小时前
原生小程序如何实现跨页面传值
前端·javascript