1. 介绍ahooks

ahooks是一个封装好的React Hooks库，提供了很多常用的Hooks封装，可以帮助我们快速地开发Web应用。在ahooks中，有一个useCookieHooks可以用来操作cookie。如果要操作localStorage或sessionStorage，可以通过封装实现。

1. 封装localStorage的方法

import { useState, useEffect } from 'react';

const useLocalStorage = (key, defaultValue = null) => {
  const [value, setValue] = useState(() => {
    const storedValue = window.localStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : defaultValue;
  });

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};

上面的代码中，我们使用了useState、useEffect两个Hooks，来创建一个名为useLocalStorage的自定义Hooks，它接收两个参数：key和defaultValue。key代表localStorage中的key值，defaultValue代表如果localStorage中没有存储相应的值，则默认返回defaultValue。useLocalStorage返回一个数组，其中第一个元素为存储的值value，第二个元素为更新存储的值setValue函数。

我们可以通过下面的示例来看如何使用useLocalStorage这个自定义Hooks。

import React from 'react';
import { useLocalStorage } from '@/hooks';

const App = () => {
  const [name, setName] = useLocalStorage('name', 'John');

  const handleInputChange = (event) => {
    setName(event.target.value);
  }

  return (
    <div>
      <input value={name} onChange={handleInputChange} />
      <p>Hello, {name}!</p>
    </div>
  );
};

上面的代码中，我们引入了刚才封装好的useLocalStorage自定义Hooks，并使用它来存储名为name的值。在组件中，当用户输入时，我们使用setName将用户输入的值更新到localStorage中。当用户重新加载页面时，我们可以从localStorage中获取名为name的值。

1. 封装sessionStorage的方法

和封装localStorage的方法类似，我们可以使用useState、useEffect来创建一个名为useSessionStorage的自定义Hooks，实现对sessionStorage的封装。

import { useState, useEffect } from 'react';

const useSessionStorage = (key, defaultValue = null) => {
  const [value, setValue] = useState(() => {
    const storedValue = window.sessionStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : defaultValue;
  });

  useEffect(() => {
    window.sessionStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};

和使用localStorage类似，我们同样可以通过下面的示例来看如何使用useSessionStorage这个自定义Hooks。

import React from 'react';
import { useSessionStorage } from '@/hooks';

const App = () => {
  const [name, setName] = useSessionStorage('name', 'John');

  const handleInputChange = (event) => {
    setName(event.target.value);
  }

  return (
    <div>
      <input value={name} onChange={handleInputChange} />
      <p>Hello, {name}!</p>
    </div>
  );
};

和上面的示例类似，在这个示例中，我们同样使用了自定义Hooks，并在组件中使用它来操作sessionStorage中的值。

以上，就是使用ahooks封装cookie、localStorage、sessionStorage方法的攻略，我们可以通过自定义Hooks来实现对它们的封装，使得我们的代码更加简洁、易于维护。

本文链接：http://task.lmcjl.com/news/11405.html