React: React页面重新加载的时候怎么保留数据？

前端77

于 2024-06-17 16:46:34 发布

阅读量381

点赞数 8

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/gaotlantis/article/details/139748453

版权

在React页面重新加载时保留数据，可以通过多种方法来实现。常见的方法包括使用浏览器的本地存储（Local Storage 或 Session Storage）、URL参数、以及服务器端存储等。以下是一些具体的实现方法：

1. 使用 Local Storage

Local Storage 是一种浏览器提供的持久化存储方式，可以在浏览器关闭后仍然保留数据。适用于需要长时间保留的数据。

示例

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

const MyComponent = () => {
  const [data, setData] = useState('');

  useEffect(() => {
    // 从 Local Storage 加载数据
    const savedData = localStorage.getItem('myData');
    if (savedData) {
      setData(savedData);
    }
  }, []);

  useEffect(() => {
    // 将数据保存到 Local Storage
    localStorage.setItem('myData', data);
  }, [data]);

  const handleChange = (event) => {
    setData(event.target.value);
  };

  return (
    <div>
      <input type="text" value={data} onChange={handleChange} />
      <p>Data: {data}</p>
    </div>
  );
};

export default MyComponent;

2. 使用 Session Storage

Session Storage 与 Local Storage 类似，但数据仅在页面会话期间保留，关闭页面或浏览器后数据会被清除。适用于需要在页面刷新时保留，但不需要跨会话保留的数据。

示例

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

const MyComponent = () => {
  const [data, setData] = useState('');

  useEffect(() => {
    // 从 Session Storage 加载数据
    const savedData = sessionStorage.getItem('myData');
    if (savedData) {
      setData(savedData);
    }
  }, []);

  useEffect(() => {
    // 将数据保存到 Session Storage
    sessionStorage.setItem('myData', data);
  }, [data]);

  const handleChange = (event) => {
    setData(event.target.value);
  };

  return (
    <div>
      <input type="text" value={data} onChange={handleChange} />
      <p>Data: {data}</p>
    </div>
  );
};

export default MyComponent;

3. 使用 URL 参数

在URL中传递数据，可以在页面重新加载时通过URL参数保留数据。适用于小量数据和需要在不同页面之间传递的数据。

示例

import React, { useState, useEffect } from 'react';
import { useLocation, useHistory } from 'react-router-dom';

const useQuery = () => {
  return new URLSearchParams(useLocation().search);
};

const MyComponent = () => {
  const query = useQuery();
  const history = useHistory();
  const [data, setData] = useState(query.get('data') || '');

  useEffect(() => {
    // 更新 URL 参数
    history.replace(`?data=${data}`);
  }, [data, history]);

  const handleChange = (event) => {
    setData(event.target.value);
  };

  return (
    <div>
      <input type="text" value={data} onChange={handleChange} />
      <p>Data: {data}</p>
    </div>
  );
};

export default MyComponent;

4. 使用服务器端存储

对于需要跨设备或用户登录后保留的数据，可以将数据存储在服务器端。需要配合后端API进行数据的存储和加载。

示例

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

const MyComponent = () => {
  const [data, setData] = useState('');

  useEffect(() => {
    // 从服务器加载数据
    axios.get('/api/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('There was an error loading the data!', error);
      });
  }, []);

  useEffect(() => {
    // 将数据保存到服务器
    axios.post('/api/data', { data })
      .catch(error => {
        console.error('There was an error saving the data!', error);
      });
  }, [data]);

  const handleChange = (event) => {
    setData(event.target.value);
  };

  return (
    <div>
      <input type="text" value={data} onChange={handleChange} />
      <p>Data: {data}</p>
    </div>
  );
};

export default MyComponent;