Reactでの配列データをローカルストレージに保存し再読み込みする方法を徹底解説

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

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

    useEffect(() => {
        const storedData = localStorage.getItem('myData');
        if (storedData) {
            setData(JSON.parse(storedData));
        }
    }, []);

    return <div>{JSON.stringify(data)}</div>;
};

useEffect(() => {
    localStorage.setItem('myData', JSON.stringify(data));
}, [data]);

const addItem = (item) => {
    setData((prevData) => [...prevData, item]);
};

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

const TodoApp = () => {
    const [todos, setTodos] = useState([]); // To-Doリストの状態

    // ローカルストレージからデータを読み込む
    useEffect(() => {
        const storedTodos = localStorage.getItem('todos');
        if (storedTodos) {
            setTodos(JSON.parse(storedTodos));
        }
    }, []);

    // To-Doリストが更新されたときにローカルストレージに保存
    useEffect(() => {
        localStorage.setItem('todos', JSON.stringify(todos));
    }, [todos]);

    // To-Do項目を追加する関数
    const addTodo = (newTodo) => {
        setTodos((prevTodos) => [...prevTodos, newTodo]);
    };

    // To-Do項目を削除する関数
    const deleteTodo = (index) => {
        setTodos((prevTodos) => prevTodos.filter((_, i) => i !== index));
    };

    return (
        <div>
            <h1>To-Do List</h1>
            <input
                type="text"
                id="todoInput"
                placeholder="Add a new task"
                onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                        addTodo(e.target.value);
                        e.target.value = '';
                    }
                }}
            />
            <ul>
                {todos.map((todo, index) => (
                    <li key={index}>
                        {todo} <button onClick={() => deleteTodo(index)}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default TodoApp;

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

const ReloadExample = () => {
    const [items, setItems] = useState([]); // 配列データの状態

    // ローカルストレージからデータを読み込む
    useEffect(() => {
        const storedItems = localStorage.getItem('items');
        if (storedItems) {
            setItems(JSON.parse(storedItems)); // 文字列を配列に変換
        }
    }, []); // 初回レンダー時のみ実行

    return (
        <div>
            <h1>Saved Items</h1>
            {items.length > 0 ? (
                <ul>
                    {items.map((item, index) => (
                        <li key={index}>{item}</li>
                    ))}
                </ul>
            ) : (
                <p>No items found</p>
            )}
        </div>
    );
};

export default ReloadExample;

useEffect(() => {
    try {
        const storedItems = localStorage.getItem('items');
        if (storedItems) {
            setItems(JSON.parse(storedItems));
        }
    } catch (error) {
        console.error('Error loading data from localStorage', error);
    }
}, []);

useEffect(() => {
    localStorage.setItem('dataKey', JSON.stringify(state));
}, [state]);

const [state, setState] = useState(() => {
    const savedData = localStorage.getItem('dataKey');
    return savedData ? JSON.parse(savedData) : [];
});

import { useState, useEffect } from 'react';

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

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

    return [value, setValue];
};

export default useLocalStorage;

const [todos, setTodos] = useLocalStorage('todos', []);

useEffect(() => {
    localStorage.setItem('myArray', JSON.stringify(arrayState));
}, [arrayState]);

const addItem = (newItem) => {
    setArrayState((prevState) => [...prevState, newItem]);
};

const removeItem = (index) => {
    setArrayState((prevState) => prevState.filter((_, i) => i !== index));
};

const editItem = (index, newItem) => {
    setArrayState((prevState) =>
        prevState.map((item, i) => (i === index ? newItem : item))
    );
};

const syncLocalStorage = () => {
    const storedData = localStorage.getItem('myArray');
    const parsedData = storedData ? JSON.parse(storedData) : [];
    if (JSON.stringify(parsedData) !== JSON.stringify(arrayState)) {
        setArrayState(parsedData);
    }
};

useEffect(() => {
    const interval = setInterval(syncLocalStorage, 5000); // 5秒ごとに確認
    return () => clearInterval(interval); // コンポーネントがアンマウントされた際に停止
}, []);

import { useEffect, useState } from 'react';

const useDebounce = (value, delay) => {
    const [debouncedValue, setDebouncedValue] = useState(value);

    useEffect(() => {
        const handler = setTimeout(() => setDebouncedValue(value), delay);
        return () => clearTimeout(handler); // 前のタイマーをクリア
    }, [value, delay]);

    return debouncedValue;
};

// 使用例
const debouncedArray = useDebounce(arrayState, 300); // 300msの遅延で保存
useEffect(() => {
    localStorage.setItem('myArray', JSON.stringify(debouncedArray));
}, [debouncedArray]);

try {
    localStorage.setItem('myArray', JSON.stringify(arrayState));
} catch (error) {
    console.error('Failed to save to localStorage:', error);
}

const saveWithExpiry = (key, value, ttl) => {
    const now = Date.now();
    const data = { value, expiry: now + ttl };
    localStorage.setItem(key, JSON.stringify(data));
};

const loadWithExpiry = (key) => {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) return null;
    const item = JSON.parse(itemStr);
    if (Date.now() > item.expiry) {
        localStorage.removeItem(key);
        return null;
    }
    return item.value;
};

localStorage.removeItem('oldKey');

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

const UserListApp = () => {
    const [users, setUsers] = useState([]); // ユーザーリストの状態
    const [name, setName] = useState(''); // 入力された名前
    const [email, setEmail] = useState(''); // 入力されたメールアドレス

    // ローカルストレージからデータを読み込む
    useEffect(() => {
        const storedUsers = localStorage.getItem('users');
        if (storedUsers) {
            setUsers(JSON.parse(storedUsers));
        }
    }, []);

    // 状態が変更されるたびにローカルストレージに保存
    useEffect(() => {
        localStorage.setItem('users', JSON.stringify(users));
    }, [users]);

    // ユーザーの追加
    const addUser = () => {
        if (name && email) {
            setUsers([...users, { name, email }]);
            setName('');
            setEmail('');
        }
    };

    // ユーザーの削除
    const deleteUser = (index) => {
        setUsers(users.filter((_, i) => i !== index));
    };

    return (
        <div>
            <h1>User List</h1>
            <div>
                <input
                    type="text"
                    placeholder="Name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                />
                <input
                    type="email"
                    placeholder="Email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                />
                <button onClick={addUser}>Add User</button>
            </div>
            <ul>
                {users.map((user, index) => (
                    <li key={index}>
                        {user.name} ({user.email}){' '}
                        <button onClick={() => deleteUser(index)}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default UserListApp;