React 中 localStorage 管理

最新推荐文章于 2024-09-19 10:45:54 发布

just_a_code_man

最新推荐文章于 2024-09-19 10:45:54 发布

阅读量3.2k

点赞数

文章标签： react.js 前端 javascript typescript

本文链接：https://blog.csdn.net/just_a_code_man/article/details/122092411

版权

本文探讨了在React应用中如何利用localStorage进行本地储存管理，以解决首次操作判断和避免频繁请求的问题。通过window.localStorage提供的属性和方法，结合React创建自定义Hook，实现了在函数组件中便捷地操作localStorage，如同管理state一样。

摘要由CSDN通过智能技术生成

工作中偶尔会有判定首次进行某些操作的需求，由于前端并不直接处理数据库数据无法直接查询。若每次进入页面都发请求查询，既消耗前端性能，也浪费服务器资源。所以，在需求并不非常强，且设计服务端数据更新的情况下，前端一般使用本地储存的方式处理。

JS在 window 对象下提供了一个localStorage 来方便我们管理本地储存。

localStorage 是一个 Storage 对象挂载了 key,clear,setItem,getItem,removeItem,length六个属性和方法供我们使用。通过这六个属性方法可以实现对localstorage的增删改查。

基于以上方法和 react ，创建一个 hook ，来在函数组件中像管理 react state 一样管理 localStorage。

import React from 'react';

export const useStorage = (key: string, val: any) => {
  // 获取 localStorage 对应键值
  let local = window.localStorage.getItem(key) as string | null;
  // 对取出的数据进行 JSON.parse 处理
  local = local === null ? null : localFormat(local);
  // 传入值 是否是 Object 如果是，进行 JSON.stringify 处理
  const value = valueFormat(val);
  // 创建 react 状态 若不存在对应 localStorage 则初始化 ，若存在则将其存储在 react 状态中
  const [state,