React client side storage

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.

javascript
// Storing data in local storage
localStorage.setItem('key', 'value');

// Retrieving data from local Storage
const data = localStorage.getItem('key');

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.

javascript
// Storing data in session Storage
sessionStorage.setItem('key', 'value');

// Retrieving data from session Storage
const data = sessionStorage.getItem('key');

Security Considerations

- Security: Local Storage is not secure for storing sensitive information like passwords or authentication tokens.
- Storage limits: Both Local Storage and Session Storage have storage capacity limits, typically around 5 MB per domain.
- Browser support: Ensure compatibility across different browsers before relying on these storage mechanisms.

Example Usage in React

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

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

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

  useEffect(() => {
    const storeData = async () => {
      const key = 'my-key';
      const value = 'my-value';

      localStorage.setItem(key, JSON.stringify(value));
      sessionStorage.setItem(key, JSON.stringify(value));
    };

    const retrieveData = async () => {
      const key = 'my-key';
      const localData = localStorage.getItem(key);
      const sessionData = sessionStorage.getItem(key);

      if (localData) {
        setData(JSON.parse(localData));
      } else if (sessionData) {
        setData(JSON.parse(sessionData));
      }
    };

    storeData();
    retrieveData();
  }, []);

  return (
    <div>
      <h1>Data: {data}</h1>
      <button onClick={storeData}>Store Data</button>
    </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 these storage options effectively, you can enhance the functionality and responsiveness of your React applications[1][2][4].