需求：

1. 希望在組件中對(duì)一個(gè)變量name操作，一旦給name設(shè)置一個(gè)新的值，就把name存儲(chǔ)到localStorage(不同于sessionStorage)中；
2. 如果下次再打開(kāi)網(wǎng)頁(yè)，重新加載的時(shí)候，希望可以從localStorage中把name的值加載進(jìn)去。
   也就是對(duì)name的所有操作，都通過(guò)localStorage做一個(gè)存儲(chǔ)。

import React, { useState, useEffect } from 'react'
export default function CustomDataStoreHook() {
  const [name, setName] = useState(() => {
    const name = window.localStorage.getItem("name");
    return name;
  });
  useEffect(() => {
    window.localStorage.setItem("name", name);
  }, [name]);
  return (
    <div>
      <h2>CustomDataStoreHook: {name}</h2>
      <button onClick={e => setName("coderwwq")}>設(shè)置name</button>
    </div>
  )
}

現(xiàn)在我們存儲(chǔ)的是字符串，如果是要存儲(chǔ)一個(gè)對(duì)象呢？

• 使用JSON.stringify(name)對(duì)我們的name對(duì)象數(shù)據(jù)進(jìn)行一個(gè)序列化；
• 相應(yīng)地，我們使用是需要在相應(yīng)的地方做一個(gè)解析。

const name = JSON.parse(window.localStorage.getItem("name"));

引申一下：

如果開(kāi)發(fā)中，有很多類(lèi)似于name的數(shù)據(jù)，我們都想通過(guò)localStorage對(duì)其進(jìn)行一個(gè)存儲(chǔ)，應(yīng)該怎么做？

• 如果每個(gè)都進(jìn)行序列化和解析，就很麻煩；
• 這時(shí)候我們可以將代碼邏輯抽取到自定義hook中操作。

// 自定義hook
const { useEffect, useState } = require("react");
export default function useLocalStorage(key) {
  const [name, setName] = useState(() => {
    const name = JSON.parse(window.localStorage.getItem(key));
    return name;
  });
  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(name));
  }, [name]);
  return [name, setName];
}

import React from 'react'
import useLocalStorage from '../hooks/local-store-hook'
export default function CustomDataStoreHook() {
  const [name, setName] = useLocalStorage("name");
  return (
    <div>
      <h2>CustomDataStoreHook: {name}</h2>
      <button onClick={e => setName("coderwwq")}>設(shè)置name</button>
    </div>
  )
}

高階組件中能做的，不能做的，通過(guò)自定義hook都可以。