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

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.

HTML JQuery Javascript saving user information after login?

I been designing websites for a while now, but I've never actually created a log-in-based website, before. I have a website designed that stores and retrieves data from a database, including user log-in information.
After a user has entered the correct log-in information, how do you store the logged-in state, and the users data to use when they, for instance, click on their profile? I'm assuming cookies, but I'm not sure.

User session with backbone.js

I am writing a web app with Backbone.js and require.js that needs to store user information to use throughout the app when the user login. Currently, when the user submits there credentials a web service authenticates the user and returns data about that user. Traditionally I could then store that information in a session. How can I accomplish this using Backbone?

You might want to use HTML5 SessionStorage for that. Have a look at this SessionStorageAdpater for backbone integration.

Typically one stores authentication information in an encrypted cookie that is sent to the server on each request. This is essentially a value that correlates the logged in user to the web server's identity store.
You are probably more interested in profile data (i.e. metadata about the user - firstname, birthday, etc). Once the user has logged in, when the page loads, fetch the profile data about the current user via an ajax call to the server (the request would include the auth cookie, which the web framework would use to find the currently logged in user). So you should expose a route on your web app that returns a json data structure containing the profile data your app requires about the current user.

I am currently in the process of writing a large Backbone / Marionette application. I'm storing the user information (not password or another like that) in a model called user. I then use this model to first validate the user by checking the sessionid.
// before every request
if (app.Core.models.user.get('sessionid') != "") {
// then I run the code. Authentication can still fail on the server.
} else {
// trigger the event to bring up the sign in page
app.vent.trigger('App:Core:Login');
}
After the user logs into the application, I save the information I received from the authentication inside the app.Core.models.user model. Since my authentication does not return a full user name, I make a separate ajax call to retrieve this information and store that information in the model too. I then tie the model to a section of my page that automatically updates the user name in the header of the page.
The browser automatically stores an encrypted cookie so I don't have to send any of this information back to the server.

Javascript cookie to save user preference and display content using the shared preference?

I need a solution based on java script(cookies), which could save the user selected preferences and render the output(html pages) acc. to the cookie saved.
Here is the situation:
Lets say user starts from page1 and navigates to page2(having 40-50 hyperlinks) and there he selects or clicks one of the hyperlink and get directed to the target page(there will be 40-50 pages corresponding to those 40-50 links).
So all i need is to automate the whole process, so that after first visit user's selection could get saved and he will directly get navigated to final target(It will be one of the page from 40-50 pages).
Any code-snippet will highly be appreciated..
mrana

I am curious to know why can't you do this in a preference table on the server side. Cookies can be removed from the browser (which would force users to go through that step again) and storing 40-50 cookies in the browser is not a good solution, as cookies get transmitted to every HTTP request so it would waste users' bandwidth.
If you have these settings/preferences stored on the server side then you can easily determine where to send the user when he logs in to your site, instead of extracting those information from the cookies.
Alternatively you can store these preferences in localStorage which provides bigger storage for storing key/values. The downside is that you need to load a bootstrap JS first which will read the settings from localStorage and decide where to redirect the user.
But IMHO I'd still go with a server side solution if I have to store 40-50 preferences.
Note: Cookies can only have 4KB of data, this is a limit.