Can I use both Local Storage and Session Storage together in a React app

Local Storage

- Persistence: Data remains intact even after the browser is closed and reopened.
- Easy to use: Simple API with only a few lines of code needed to store or retrieve data.
- Cross-origin accessibility: Data can be accessed by any page or script from the same origin.
- Large storage capacity: Typically around 5 MB per domain.

Session Storage

- Isolation: Data is isolated between different browser sessions.
- Temporary storage: Data is cleared when the browser tab or window is closed.
- Useful for temporary data: Ideal for storing data that needs to be maintained within a session.

Example Usage in React

Here is a sample React code snippet that demonstrates the usage of both Local Storage and Session Storage:

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

function App() {
  const [todoInput, setTodoInput] = useState('');
  const [todos, setTodos] = useState([]);
  const [localData, setLocalData] = useState(null);
  const [sessionData, setSessionData] = useState(null);

  const handleTodos = (e) => {
    e.preventDefault();
    const todoCount = +localStorage.length + 1;
    localStorage.setItem('todo' + todoCount, todoInput);
    setTodos(prev => [...prev, todoInput]);

    sessionStorage.setItem('todo', todoInput);
    setSessionData(todoInput);
  };

  useEffect(() => {
    const keys = Object.keys(localStorage);
    const todosArray = [];
    keys.forEach(item => todosArray.push(localStorage.getItem(item)));
    setLocalData(todosArray);

    const sessionKeys = Object.keys(sessionStorage);
    const sessionTodosArray = [];
    sessionKeys.forEach(item => sessionTodosArray.push(sessionStorage.getItem(item)));
    setSessionData(sessionTodosArray);
  }, []);

  return (
    <div className="App">
      <input onChange={e => setTodoInput(e.target.value)} type="text" placeholder="Task" />
      <button onClick={handleTodos}>Submit</button>
      <ul>
        {todos.map(todo => <li>{todo}</li>)}
      </ul>
      <ul>
        {localData.map(todo => <li>{todo}</li>)}
      </ul>
      <ul>
        {sessionData.map(todo => <li>{todo}</li>)}
      </ul>
    </div>
  );
}

export default App;

Best Practices

- Use a custom React hook: Extract the storage functionality into a reusable custom React hook to simplify usage across multiple components.
- Clear unnecessary data: Ensure to clear unnecessary data from Local Storage or Session Storage to maintain privacy and free up storage space.

By leveraging both Local Storage and Session Storage effectively, you can enhance the functionality and responsiveness of your React applications[1][2][3].