业务层hooks封装useSessionStorage实例详解

2023年6月11日上午10:45 • JavaScript

“业务层hooks封装useSessionStorage实例详解”说明了如何使用React Hooks封装一个自定义的钩子函数useSessionStorage，来实现将数据存储到浏览器的Session Storage中。下面，我将为您详细讲解这一攻略的过程及示例。

一、为什么需要使用Session Storage？

浏览器提供了三种方式用于客户端存储数据：cookie、localStorage和sessionStorage。其中，Session Storage可以用于在单个会话期间存储数据，也就是浏览器打开到关闭这段时间内。Session Storage比cookie更为安全，也比localStorage使用更加方便，因为他们的数据被存储在对象中，而不是文本字符串。

二、封装useSessionStorage钩子函数

以下是该钩子函数的完整代码实现：

import { useState } from 'react';

const useSessionStorage = (key, initialValue) => {
  // 获取session storage中存储的数据
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.sessionStorage.getItem(key);
      // 如果key对应的数据不存在则返回初始值
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  // 更新session storage中的数据
  const setValue = value => {
    try {
      // 允许值为函数（适用于store中存储对象更新其中一个属性的情况）
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      // 将数据存入session storage
      window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
      // 更新本地状态
      setStoredValue(valueToStore);
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
};

export default useSessionStorage;

该钩子函数接受两个参数：key和initialValue，分别表示存储在session storage中的键和初识值。在定义useSessionStorage钩子函数时，使用了useState钩子函数，用于管理session storage中存储的数据。同时，setValue函数用于更新session storage中的数据，他接受一个参数，可以是一个具体的值，也可以是一个回调函数，回调函数返回一个更新后的值。最后，我们将storedValue和setValue两个状态变量放入一个数组中一并返回。

三、使用useSessionStorage钩子函数

使用useSessionStorage钩子函数的方式与使用其他React钩子函数相同，只需把上一步中定义的useSessionStorage导入到我们的组件中即可。

以下是一个示例代码：

import React from 'react';
import useSessionStorage from './useSessionStorage';

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

  return (
    <div>
      <h2>Hello, {name}!</h2>
      <input
        type="text"
        value={name}
        onChange={e => setName(e.target.value)}
      />
    </div>
  );
};

export default App;

在这个示例中，我们使用useSessionStorage钩子来管理一个名为name的字符串。初始值为Tom。我们通过setName函数来更新它。可以看到，我们可以像其他React钩子函数也一样，直接使用数组解构来获取钩子函数返回的多个状态变量。