We Keep Coding

Should one use local storage to persist and reload redux state and JWT across browser restarts?

Is there any rule regarding when to use local storage or not to store state information if I have redux?
For example if I have some online form, then
Q1. should I have its state (currently filled values) persisted to localstorage say when user closes tab or browser, so that I can reload the state in redux from localstorage when user revisits the webpage? Is there any well know / documented security consideration for storing redux state in local storage?
Q2. Or should I always send last saved redux state from the server (and not save and load from localstorage) when user visits the website first time after opening the browser. If that is the case
Q3. If the answer to Q2 is YES, then what about JWT? Should we store JWT in localstorage avoiding forcing user to re-login?

Q1
In terms of OAuth Best Current Practice I would avoid storing anything like this in local storage:
Credit card numbers
Passwords
Access tokens
Personally identifiable information, eg name, email
Use browser storage for simple data such as the application path before an OAuth redirect, or simple boolean preferences. Prefer session storage over local storage, unless you need settings across multiple browser tabs.
Q2
Using the server is safest for anything sensitive, so it is worth investing in an API driven save and load option.
Q3
Avoid JWTs in local storage, since there are more attack vectors that could result in stolen data. If you are migrating from this model then start by storing a refresh token in an encrypted HTTP Only SameSite=strict cookie, and store access tokens only in memory.
This will enable you to avoid logins on page reloads or when the user opens a new browser tab, and is easy to implement by routing token requests via a utility API. You could then go further to take access tokens out of the browser completely. See the SPA Best Practices article for further related details.

It depends.
Q1. If it's non-updating data and you don't need to make request to backend for it. You can use localstorage.
Security Issue with localstorage is that user can access it and alter or delete the data. In that case you again need to hit your api for data.
Q2. If the data is updating (eg - posts,likes in blog app). Then you need to make a request to server to fetch the latest data.
Q3. Yes, mostly jwt is stored in localStorage which avoid user to re-login. If the user try to alter the jwt, the backend has methods to check it. read How jwt works

Refreshing page lost data of API?

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.

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.

Does each user only have 1 session id?

I'm still a beginner in using sessions and cookies and I don't understand this, so I want to ask:
1. Does each user only have 1 Session ID?
2. What is a Session ID?
I tried to store data in session, but when I tried to store other data it had a same Session ID. So how do I know who this data belongs to?
I actually want to make a shopping cart in react.js SPA using backend express. but i dont know how to store this data cart. so far what I have done I want to save the data cart into a session, like product_id and product_variantand then call this product_id and product_variant in database based on this Session ID.
Correct Me If I'm Wrong. Thanks

You should be generating the session ID & then storing it in a database & attaching it to a user ID. That way you know the user by looking for their session ID when they move around the website/software.
You can also record things like their IP address, browser information, and time of access to make it a tad bit more secure - making it harder for a hacker to hijack their session information.
Also, the only other thing I should mention is that you should not be storing private information in the session data. For example, do not store their account ID in the session variables or their password/email/username/etc. It is possible to modify session data & access other accounts if you rely on the session data itself to tell you who a user is. The encrypted/randomized session IDs can be so unique that it is near impossible for a user to reasonably trick your server into thinking they are a different account. So that's why we store them in the database w/ additional information instead of setting other session variables.
Example:
In PHP we could have the session_id(), but also store things like $_SESSION['setting'], or $_SESSION['theme_choice'] and other trivial settings to prevent having to look it up in the database every page load.

Best way to keep authenticated user profile in Angular2

I am using Angular2 & Auth0 to Authenticate a user.
Currently, according to their "best-practice" , the user profile is saved to localStorage , and once you need to pull information, take it from there.
This sounds like a bad practice to me, is there a better way to keep logged in profile for local query (name, photo etc.)? maybe using an Angular2 service?

The problem is if you want to keep the user profile for later use (if the user close the window and reopen it later) without having to make request to a server. Then you need to store it somewhere.
And storage facilities in the browser are quite limited: IndexedDB for database storage with query capabilities, indexes, etc, localStorage for simple key=>value storage,or even cookie for a limited amount of data as plain-text.
but if you don't need the data for a later use, you can keep it in memory (in a service, for example).
You can also combine both in-memory and offline-storage in a service.

You can combine both ways.
Storing it in localstorage to get that infos without request them anytime and wrapping a Service around it to not address the storage from everywhere.