introduction
There are several ways to preserve data when React page reloads. Common methods include using the browser's local storage (Local Storage or Session Storage), URL parameters, and server-side storage. Here are some specific implementation methods:
1. Use Local Storage
Local Storage is a persistent storage method provided by a browser, which can still retain data after the browser is closed. Suitable for data that needs to be retained for a long time.
Example
import React, { useState, useEffect } from 'react';
const MyComponent = () => {
const [data, setData] = useState('');
useEffect(() => {
// Load data from Local Storage const savedData = ('myData');
if (savedData) {
setData(savedData);
}
}, []);
useEffect(() => {
// Save data to Local Storage ('myData', data);
}, [data]);
const handleChange = (event) => {
setData();
};
return (
<div>
<input type="text" value={data} onChange={handleChange} />
<p>Data: {data}</p>
</div>
);
};
export default MyComponent;
2. Use Session Storage
Session Storage is similar to Local Storage, but the data is only retained during a page session and the data will be cleared after closing the page or browser. Suitable for data that needs to be retained when the page is refreshed but does not need to be retained across sessions.
Example
import React, { useState, useEffect } from 'react';
const MyComponent = () => {
const [data, setData] = useState('');
useEffect(() => {
// Load data from Session Storage const savedData = ('myData');
if (savedData) {
setData(savedData);
}
}, []);
useEffect(() => {
// Save data to Session Storage ('myData', data);
}, [data]);
const handleChange = (event) => {
setData();
};
return (
<div>
<input type="text" value={data} onChange={handleChange} />
<p>Data: {data}</p>
</div>
);
};
export default MyComponent;
3. Use URL parameters
Passing data in a URL allows you to preserve data through URL parameters when the page is reloaded. Suitable for small amounts of data and data that needs to be passed between different pages.
Example
import React, { useState, useEffect } from 'react';
import { useLocation, useHistory } from 'react-router-dom';
const useQuery = () => {
return new URLSearchParams(useLocation().search);
};
const MyComponent = () => {
const query = useQuery();
const history = useHistory();
const [data, setData] = useState(('data') || '');
useEffect(() => {
// Update URL parameters (`?data=${data}`);
}, [data, history]);
const handleChange = (event) => {
setData();
};
return (
<div>
<input type="text" value={data} onChange={handleChange} />
<p>Data: {data}</p>
</div>
);
};
export default MyComponent;
4. Use server-side storage
For data that needs to be retained after logging in across devices or users, the data can be stored on the server side. It is necessary to use the backend API to store and load data.
Example
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const MyComponent = () => {
const [data, setData] = useState('');
useEffect(() => {
// Load data from the server ('/api/data')
.then(response => {
setData();
})
.catch(error => {
('There was an error loading the data!', error);
});
}, []);
useEffect(() => {
// Save data to the server ('/api/data', { data })
.catch(error => {
('There was an error saving the data!', error);
});
}, [data]);
const handleChange = (event) => {
setData();
};
return (
<div>
<input type="text" value={data} onChange={handleChange} />
<p>Data: {data}</p>
</div>
);
};
export default MyComponent;
Summarize
Different methods are suitable for different scenarios:
- Local Storage: Suitable for data that needs to be retained for a long time.
- Session Storage: Applicable to data retention during page sessions.
- URL Parameters: Suitable for passing small amounts of data between pages.
- Server-side storage: Applicable to data that needs to be retained after logging in across devices or users.
By choosing the right method, data can be effectively retained in React applications and improved user experience.
This is the article about the implementation method of retaining data when reloading React page. For more related content related to React reloading retained data, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!