React 中 localStorage 管理

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

        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,