54.React学习笔记.自定义hook练习-localStorage存储

需求：

1. 希望在组件中对一个变量name操作，一旦给name设置一个新的值，就把name存储到localStorage(不同于sessionStorage)中；
2. 如果下次再打开网页，重新加载的时候，希望可以从localStorage中把name的值加载进去。
   也就是对name的所有操作，都通过localStorage做一个存储。

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")}>设置name</button>
    </div>
  )
}

现在我们存储的是字符串，如果是要存储一个对象呢？

• 使用JSON.stringify(name)对我们的name对象数据进行一个序列化；
• 相应地，我们使用是需要在相应的地方做一个解析。

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

引申一下：

如果开发中，有很多类似于name的数据，我们都想通过localStorage对其进行一个存储，应该怎么做？

• 如果每个都进行序列化和解析，就很麻烦；
• 这时候我们可以将代码逻辑抽取到自定义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")}>设置name</button>
    </div>
  )
}

高阶组件中能做的，不能做的，通过自定义hook都可以。