score:2
Accepted answer
all you need is to save the necessary data with a timestamp. and check whether the date has been expired.
loaddata = () => {
// check whether data exists in localstorage and has been
// saved less than an hour ago
const data = json.parse(localstorage.getitem('brand'));
if (data && (new date().gettime() - data.created <= 3600)) {
this.setstate({
note: data.brand.note,
logo: data.brand.logo,
name: data.brand.name,
});
return;
}
// otherwise perform request
axios.get('https://myapi.url').then(res => {
const brand = res.data;
// and save data in local storage with the current timestamp
localstorage.setitem(
'brand',
json.stringify({
created: new date().gettime(),
brand,
}),
);
this.setstate({
note: brand.note,
logo: brand.logo,
name: brand.name,
});
});
};
score:0
// save to localstorage
const data = {
"name": "my name",
"logo": "https://media.img.jpeg",
"note": "14,5",
"students": 3720,
"url": "https://url.students/alain"
}
localstorage.setitem('key', json.stringify(data))
// to get data from localstorage
const data = json.parse(localstorage.getitem('key'));
console.log(data);
// to remove data
localstorage.removeitem('key');
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
score:0
instead of saving these items to your localstorage, i recommend to store them in the redux store instead. if you're not using redux: https://react-redux.js.org/introduction/quick-start
Source: stackoverflow.com
Related Query
- How can i use localStorage to maintain state after a page refresh in React
- How can I use the same React app in multiple locations of the same page?
- Can anyone help me how can I use jQuery-formBuilder plugin in meteor react app
- How can i use localStorage on my React app?
- How do i have an assets file that i can use in any file in my react app without always having to navigate to the assets folder
- How can I use node module in react app after production build?
- How can I make use of Error boundaries in functional React components?
- react Material-ui, How do I know I can use onClick for button?
- How can I use React hooks in React classic `class` component?
- How we can use pipes in React JavaScript?
- How to know if react-router can go back to display back button in react app
- How can I present a native UIViewController in React Native? (Can't use just a UIView)
- React hook form: How to can I use onChange on React Hook Form Version 7.0
- How to use environment variables in React app hosted in Azure
- how can I use fs in react with electron?
- How can I use history.push('path') in react router 5.1.2 in stateful component?
- React Use Context. Cannot destructure property 'currentChatbotInEdit' of 'Object(...)(...)' as it is undefined. How can I fix that?
- How to use yarn to create a React app project?
- How can I use React with Google Places API, to display place markers on a Google map?
- How can I use decorators in a React Redux application?
- How can I clear the localstorage when user close react application window?
- How can I use React Material UI's transition components to animate adding an item to a list?
- In React Native, How Can I Use KeyboardAvoidingView with a Modal in iOS?
- how to use .env.qa or .env.staging with create react app
- How can I use style-loader in react SSR (Server Side Rendering)?
- How to use Tesseract.js in a React app
- How to avoid very long paths and use absolute paths within a Create React App project?
- How can I use an IIFE in the return function of a react component?
- How to use React.FC<props> type when the children can either be a React node or a function
- How can I start my node server and react app at the same time?
More Query from same tag
- iOS (React native): Unnecessary space from the top of the header rendered using react navigation
- prop oneOf array or default in React.js
- Trying to return a value from a fetch request and populating using react hooks
- Setting Interval speed using setState in React.js
- React Router v4 components with similar paths (fixed and dynamic path param) are "overlapping"
- React: Rendered more hooks than during the previous render? React-spring
- sweetalert2 Success and Error Alerts :: Only Showing Error Alerts
- Why is my translations not working with react-i18next?
- Type 'unknown[]' is not assignable to type
- How to rewrite a React class that extends another class as a functional component?
- How to integrate FontAwesome 5 Pro with React?
- Prevent to open dialog modal in loop
- React doesn't update on state change?
- Can I force hydrate to add attribute to element?
- Assigning API data to variable in Javascript
- Hold input values in local state, but pass to parent to submit form
- React-PDF Slow Performance with large PDF
- rendering components in div with react router
- Alter text in span tag dynamically with React issue
- Rerender line count React
- multiple layer of forwardRef and useImperativeHandle
- material ui: find which component create this tag
- Can I setState in Parent from Child component?
- React Native listView item delete not properly removing item
- How to remove duplicated before map
- React Virtualised trouble understanding overscanIndicesGetter
- How to use custom element as dropdown button in React Bootstrap
- NavLink renders as it should, but doesn't work
- SetState the empty array with Json Response array of object?
- How to display state variables access inside map loop as horizontal tabs in React-Bootstrap?