基礎(chǔ)功能

1. 將 state 保存到 localStorage 中汗唱，實現(xiàn)本地持久化空郊；
2. 如果清空了值份招，也從 localStorage 中刪除這條數(shù)據(jù);
3. 會自動處理序列化和反序列化的操作；
4. 重新刷新頁面后也能拿到之前的值狞甚；
5. 同源多頁面之間也能共享值锁摔，當其中一個頁面的值發(fā)生了改變，不刷新其他頁面下也能更新值入愧。

具體實現(xiàn)代碼

import { useState, useEffect } from "react";

const useLocalStorageState = (key, defaultState) => {
  const [localState, setLocalState] = useState(defaultState);
  const [showState, setShowState] = useState(defaultState);

  // 刷新頁面后能拿到值
  useEffect(() => {
    const value = localStorage.getItem(key);
    if (!value) {
      return;
    }
    setLocalState(value);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 同源頁面監(jiān)聽改變實時刷新
  useEffect(() => {
    const storageFuction = function(e) {
      const value = e.newValue
      setLocalState(value)
    }
    window.addEventListener('storage', storageFuction)
    return () => {
      window.removeEventListener('storage', storageFuction)
    }
    // console.log(localStorage.getItem(key))
  }, [])

  useEffect(() => {
    if (localState) {
      if (typeof localState === "object") {
        localStorage.setItem(key, JSON.stringify(localState));
      } else {
        localStorage.setItem(key, String(localState));
      }
      setShowState(localState)
      return;
    }
    localStorage.removeItem(key);
    setShowState(undefined)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [localState]);

  return [showState, setLocalState];
};

export default useLocalStorageState;

demo

demo1

import useLocalStorageState from './hooks/useLocalStorageState'

function App() {
  const [state,setState] =  useLocalStorageState('test', [])
  return (
    <div className="App" style={{textAlign: 'center'}}>
      <header className="App-header">
        <p>
          { state }
        </p>
        <button onClick={() => setState([...state, 'A'])}>Push A</button>
        <button onClick={() => setState(state.slice(0, state.length - 1))}>Pop A</button>
      </header>
    </div>
  );
}

export default App;

demo2

import useLocalStorageState from './hooks/useLocalStorageState'

function App() {
  const [state,setState] =  useLocalStorageState('test', '')
  return (
    <div className="App" style={{textAlign: 'center'}}>
      <header className="App-header">
        <p>
          { state }
        </p>
        <input value={state || ''} onChange={(e) => setState(e.target.value)} />
      </header>
    </div>
  );
}

export default App;