需求：
- 希望在组件中对一个变量name操作，一旦给name设置一个新的值，就把name存储到localStorage(不同于sessionStorage)中；
- 如果下次再打开网页，重新加载的时候，希望可以从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都可以。
