React:页面刷新时如何存储数组_React - Django页面刷新时为空_页面刷新时音频不再播放- React - 腾讯云开发者社区

基础概念

React 是一个用于构建用户界面的 JavaScript 库。在 React 中，页面刷新时，所有的状态都会丢失，因为浏览器会重新加载整个页面。为了在页面刷新时保留数据，可以使用一些持久化存储方案。

类型

LocalStorage：一种在客户端存储数据的机制，数据在浏览器关闭后依然存在。
SessionStorage：与 LocalStorage 类似，但数据仅在当前会话中有效，浏览器关闭后数据会被清除。
IndexedDB：一个事务数据库系统，适合存储大量结构化数据。
Cookies：一种在客户端存储少量数据的方式，通常用于存储会话信息。

应用场景

表单数据：用户在填写表单时，页面刷新会导致数据丢失，使用存储方案可以保留这些数据。
购物车：用户在浏览商品并添加到购物车后，页面刷新不应清空购物车。
用户设置：用户的个性化设置需要在页面刷新后依然保留。

问题与解决方案

问题：页面刷新时如何存储数组？

原因

页面刷新会导致 React 组件的状态丢失，因为浏览器会重新加载整个页面。

解决方案

使用 localStorage 或 sessionStorage 来存储数组数据。

示例代码

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

function App() {
  const [items, setItems] = useState([]);

  // 加载数据
  useEffect(() => {
    const storedItems = JSON.parse(localStorage.getItem('items'));
    if (storedItems) {
      setItems(storedItems);
    }
  }, []);

  // 保存数据
  useEffect(() => {
    localStorage.setItem('items', JSON.stringify(items));
  }, [items]);

  const addItem = () => {
    const newItem = { id: Date.now(), name: 'New Item' };
    setItems([...items, newItem]);
  };

  return (
    <div>
      <h1>Stored Items</h1>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  );
}

export default App;