使用useLocalStorage

插件安装

@rehooks/local-storage

地址：@rehooks/local-storage - npm

任务：

设置用户和删除用户

设置num和删除num

Local.js

import React from 'react'
import {useLocalStorage} from '@rehooks/local-storage'

const Local = () => {
    const [user,setUser,delUser] = useLocalStorage('user',{});
    const [num,setNum, delNum] = useLocalStorage('num',{});
  return (
    <div>
      <div>
        <h2>{user.name}</h2>
        <button onClick={() => setUser({name:'张三'})}>设置user</button>
        <button onClick={delUser}>删除用户</button>
      </div>
      <div>
        <h2>{num.count}</h2>
        <button onClick={() => setNum(1000)}>设置num</button>
        <button onClick={delNum}>删除num</button>
      </div>
    </div>
  )
}

export default Local

App.js

import  ReducerDemo  from "./pages/ReducerDemo";
import "./App.css";
import React from "react";
import Local from "./components/Local";

const App = () => {
  return (
    <div>
      
      <Local />

    </div>
  );
};

export default App;

useLocalStorage