将数据存储在 LocalStorage 中的 React 应用中

什么是 LocalStorage？

LocalStorage 是一种 HTML5 提供的 Web 存储 API，它可以让你在浏览器中存储数据。LocalStorage 存储的数据会永久保存，并且在不同的浏览器会话之间也会保留下来。它可以存储所有的 JavaScript 基本类型，如字符串、数字、布尔值等。

LocalStorage 比起 Cookie 的优点在于它可以存储更多的数据，并且不需要像 Cookie 一样把数据发送到服务器。

在 React 中使用 LocalStorage

在 React 中使用 LocalStorage 很简单。可以使用 JavaScript 中内置的 localStorage 对象，将信息保存到浏览器的 LocalStorage 中。因为 LocalStorage 中只能存储字符串，所以需要将其它数据类型（如对象）转换为字符串。

import React, { useState, useEffect } from 'react';

function App() {
  const [name, setName] = useState('');

  useEffect(() => {
    const storedName = localStorage.getItem('name');
    if (storedName !== null) {
      setName(storedName);
    }
  }, []);

  const handleNameChange = (e) => {
    setName(e.target.value);
    localStorage.setItem('name', e.target.value);
  };

  return (
    <div>
      <label>
        Enter Your Name:
        <input placeholder="Your Name Here" value={name} onChange={handleNameChange} />
      </label>
      <p>{name ? `Hello, ${name}` : 'Please enter your name to continue.'}</p>
    </div>
  );
}

export default App;

这段代码中，我们通过 useState 创建了一个名为 name 的 state，用来存储用户输入的名字。然后在 useEffect 中检查 LocalStorage 是否有之前保存的名字，如果有，则设置 name 的初始值为之前保存的名字。

在 handleNameChange 函数中，我们在 localStorage 保存了新的名字。

在 render 方法中，我们展示了 name 的值，如果 name 为空，则提示用户输入名字。

总结

本文简要介绍了如何在 React 应用中使用 LocalStorage，其实使用 LocalStorage 可以保存的东西不仅仅局限于用户信息，还可以保存应用的状态等，为用户提供更好的体验。