Local storage is a web storage that allows Javascript websites and apps to store and access data right in the browser with no expiration time.
Here is a simple example of how to use local storage with React:
1. Writing to local storage:
```
localStorage.setItem(‘myData’, ‘This is my stored data’);
```
This will store the string ‘This is my stored data’ in local storage under the key ‘myData’.
1. Reading from local storage:
```
let storedData = localStorage.getItem(‘myData’);
console.log(storedData);
```
‘getItem’ returns the data stored in local storage under the key ‘myData’.
1. Remove an item from local storage:
```
localStorage.removeItem(‘myData’);
```
This will remove the data associated with ‘myData’ key.
1. Clear all items from local storage:
```
localStorage.clear();
```
This removes all data from local storage.
If you want to use local storage within React components:
- In a class based component:
```
class MyClassComponent extends React.Component {
componentDidMount() {
const data = localStorage.getItem(‘myData’);
this.setState({ myData: data });
}
}
```
The componentDidMount lifecycle method is a good place to retrieve your data from local storage, because by then, the component has been mounted in the DOM.
- In a functional component:
```
import { useEffect } from ‘react’;
function MyFunctionalComponent() {
useEffect(() => {
const data = localStorage.getItem(‘myData’);
//rest of the code
}, []); // passing in an empty array to mimic componentDidMount behaviour
}
```
We can retrieve the data from local storage in the useEffect hook. This hook takes two parameters: a callback function that it will call after every render, and an array of dependencies. If the array is empty, the callback will only be called once after the component is mounted.
You can also persist your React state in local storage by calling ‘localStorage.setItem’ every time your state changes. But remember that local storage is synchronous and can be slow when storing large amounts of data, which could potentially hurt your app’s performance.
