Refreshing page lost data of API? - javascript

hi everyone i am getting data from api in react and also storing token in my local storage but when i refresh the page my data of API lost but my token remain save in local storage .
Now i don't want to lost my data on refresh my page

You could store your data in your localstorage aswell. But I don't see why you couldn't just go fetch your data once again. The less you store Client side, the better. Because everything stored client side can be altered by the client.
P.S. NegativeFriction Is having a great point on reading old data, in the comment.

You could store the data (user list in your case) in the local storage, but I would discourage you from doing that for the following reasons:
Local storage is limited and adding a user list will pollute that space for you.
Data like user list might need updating regularly. It is recommended that you get a fresh list every time.

Depending on how complex your app is you can use a state manager like Redux or you can simply store the data you need by converting it to a string and storing it away. Once your application refreshes fetch this string again from local storage and load it back into your components.
let myData = JSON.stringify(data)
localStorage.setItem('profile_data')
//on page reload
let storedData = JSON.parse(localStorage.getItem('profile_data'))
Have to agree with #Nicolas on refetching your data on client apps. If its stuff like user profile you are storing then it would be wise to fetch that data every-time a page refreshes.

Related

Angular how to save a whole page or component data to be used later

i have an angular 6 app that has different components(screens) that use #angular/material horizontal stepper and each step has complex forms(template driven forms and formgroups) and i want to save the whole steps in draft(may be in localStorage or mongodb) if the process is not finished or if a user want to save in order to continue later, but all components structure are different because they have different formgroups and class member variables so what i'm asking is there any solution to save the whole stepper or whole angular component with data so when a user want to use will continue the process without losing his/her data?
NOTE: all components has different variables that changes during forms filling and some are used to hide some part of the app/formControls.
You can use the browser web storage, most latest browsers now support this feature https://www.w3schools.com/html/html5_webstorage.asp if your are moving out of the page you can always check on this storage but with session storage you have to be aware that for every new tab you lose the data you saved on session storage if you need the data to be accessible on the whole browser even by other tabs local storage would be appropriate other else you may also use cookies as well to maintain the data and restore the user inputs.
you have to save customer data in the server cache or db, you can maintain the status if it isDraft or isSave or isSubmitted, so you can get the details if customer has save or submitted the data.

Angular 6 store session data

I don't know which forum suits this question, so suggest me to move...
I do not want to store current user data in browser (cookie,session storage or local storage).
So what else options are there,
Heard about the redux- pattern ng-rx does it holds data even after refreshing the page, if yes where does it store the data.
I am very much new to angular and have experience with .net where we store data on server side using session or anything else like memcache etc.
I can only see one option to use any database to store data like firestore or anything else.
what else options I could adopt to store user sessions data or temporary data which should be available even user refresh the page.

Loose data on refresh page Angular js

I have an AngularJS app like this one:
http://next.plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview&preview
and the $scope data that I have, is from an API,
When the page first loaded I call to this API and I save the data that returned in the session,
Now I can't understand why when I refresh the page I Losing information and all the data,
How can I use the data dynamic that when I refresh the page I don't loos data?
First of all, are you using routing in your app? Here is simple example :
http://next.plnkr.co/edit/Svg4Po13hMq7WxzNwKDc?p=preview&preview
With routing you do not need to refresh your page.
As to the problem itself (don't loss data after refresh):
if you want to keep your data even when you refresh your browser use localStorage. There're lots of handy localStorage angularJS modules to use - ex.
https://github.com/grevory/angular-local-storage
if you don't want to store data on the client side, you could request your API for the data you need to store each time your angular app is getting loaded. This data seems to be static, as you are storing it on client side and reuse then, so you could configure API endpoint to throw this data really fast.

Firebase and redux? Save received data in redux store

I'm having a problem with saving the data received from the firebase.
When I was fetching the data from backend with native http calls (I was using redux/redux saga for it) the data was stored correctly in the storage, so if user entered some other component and returned back to the listed data, there was no need to fetch the data once again from the server. It was saved inside redux store.
But since Im using firebase, if user navigates over my application and returns to the component which lists some data from the server, the same data is fetched every time. This is a huge issue.
Q: Is there some way to store the data received from firebase call in redux store?
Of course, I don't want to loose the real-time database. This is a pure awesomeness, that user doesn't have to reload the page to update the content.
Looking forward for any hint or suggestions. Maybe I don't even need redux for it? Maybe firebase provides some mechanism to deal with it? Thank u!
Found an outstanding library recently, which solves cases included in my question. If anyone would ask for same thing in the future, here's the library:
https://github.com/prescottprue/react-redux-firebase

Cache invalidation and synchronisation Angular/back-end

Intro:
I've got a complex and long lasting query on the back-end, feeding back the angular app on the front-end.
Currently the angular app uses the cached data on the back-end rather than reading directly from the complex query, which would take few minutes. The cache gets warm every morning and every night.
As users make changes to the UI, and save the data, which is then passed onto the server side, and saved to database. At that time the UI is up to date until the user refreshes the page. At the same time database is up to date, but the cache is stale.
So when the user refreshes the page the stale cache values are displayed on the page.
More info:
I'm now thinking of ways to refresh the cache, and any advice from more experienced folks would be most welcome.
My idea is to refresh the cache by a cache job (one at a time), which is queued as soon as user saves something. The job will have the relevant info what changed, and the whole cache won't have to be recalculated but rather just the bit which changed.
Question part:
What technique can I use to keep the user up to date with the data even if the user refreshes the page? Should I save the 'deltas', on the client side in a form of indexedDB or localstorage, at the same when the data is sent to server. So when the page refreshes the user reads the data from the localstorage or indexed db.
I'm still thinking this through, obviously I don't have much experience in this, any comments on the directions I've taken so far?
Basically I can change anything including back-end/front-end/caching it's still in the POC phase, I'm just trying to be as informed as possible to what worked for other people.
Update
Little more background. I'm working on a index like page, so there are more than one records that can be edited inline.
Also I'm doing some transformation of the flat db records on the back-end, before dumping them into the map like structure, and passing it to the front-end in a form of json.
I would think the simplest way would be to make sure you know the time the cache was created. When you make changes, save the current state of the page in localStorage, along with the time of the cache. When you load the page, you get the cached data, check it's time to see if it is more recent than your localStorage version. If it is, use the cache, if not, reload your data from localStorage since it has the cached data PLUS your changes already.
Your question is too long, let me summarize the facts.
You have a lot of information in the database
Direct search query takes several minutes
To provide fast search, you use cache which is updated two times a day
When user changes the data, database is updated and cache is not, so web page shows outdated information from cache.
This looks like a typical cache using scenario and the solution is obvious: you should update the cache with deltas as soon as database is changed. The real implementation will depend on your application architecture and cache structure.
The typical workflow for your problem would be:
def updateRequest(Request req) {
def tx = db.startTransaction();
tx.execute(createUpdate(req.getData()));
tx.commit(); // if transaction fails, cache is not updated
cache.update(req.getData()); // can be done in background, if you return delta
}
It seems that you are storing your data in tables and you use those tables with a complex query to build a JSON configuration to render your index.html file. I avoided this problem by avoiding tables and using a NoSQL solution. I build the JSON configuration object on the client side and store that JSON configuration object in a NoSQL collection. I do a simple query using the URL to grab the JSON configuration object and render the index.html file.
I have a little experience storing the JSON configuration object with AWS DynamoDB, and if I need to get faster I will probably switch to AWS ElastiCache.
The key is that you need to cache your JSON configuration object with a useful key like the site hostname or some other base URL and use that as your source of truth for index.html rendering.

Categories