I have been developing a SPA with AngularJS and I have stored the user data in an Angular Value service but I do not feel confortable with that, basically because the Angular Value is not shared between browser tabs. So if the user opens a new browser tab and on every page refresh (F5) I have to request the server the user data like full name, email, etc. I am using a REST API.
Is this approach fine or not?. If I use localStorage it will help me to share data between tabs but I do not know if it is a better technique.
There are only 3 places you could store your data in a browser
Cookie
Local storage
Database (IndexedDB or Web SQL)
You can open your console panel to see these option.
Consideration:
Security
It depends on how important or sensitive your data stored in the
browser, if it is user sensitive, you should never stored them in the browser in the 1st place!
Size
how big is the data, you going to store? if it is huge it is good to store them in the Database, you could check out some of this framework (PouchDB)
if it is small, you could just store them in the local storage
Related
My idea is to reduce the number of requests to the server from the web client. Say, a view/component that shows user data (first retrieved before this view/component is rendered), if the user reloads the page (F5) then the whole application is reloaded and initialized again, so another request to the server to get that data again, is there any way to maintain or "caching" that state locally?.
I don't know how to implement this.
you can try redux presist link : https://github.com/rt2zz/redux-persist
or you can use localstorage : https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Like others have said, local storage is probably your best bet, but I don't think it's a very good idea. If the users reloads the page, that's essentially a blank slate for your app. You could get the data from local storage but how do you know it's still up to date? You'd need to check with the server anyway.
You should definitely look into a redux/store solution where you can store data for use while the user is using your app, so you can share data between components and don't have to fetch the same data every time. But actually storing it locally just reeks of bad practice, IMO.
So I'm working on a react application as a front and as the back python, Django and rest.
I'll do the front part in a few days, but a question spawn: how can I manage all my apps for the user with an account and the other (without the account)?
I look a few options but I don't really know which one is better:
local storage
context API
cookies
For example if the user is connected and wants to see him own profile page, he could without fetch in the code cause it's just a few information like name, email, ...
I don't know if it's enough to clear but hopefully enough to get some suggestions.
Cookies are mainly for reading server-side, whereas local storage can only be read by the client-side.
An other point is saving data, a big technical difference is the size of data you can store, localStorage give you more space.
Context API you'll use it eather you work with cookies or localStorage
You can call the API for fetching information the first time the user logs in, and then you could store the information on the app state for the whole session. If you want to store information between sessions localstorage works just fine, is easy to access. However, you'll have to check if this information exists when the user logs in.
Context API can help you to access the stored data easily by using useContext react hook API in other child components and manage them by React, but localStorage is a way to persists Context API changes with localStorage to get them back after every page reloads(prevent losing data in page refresh). But cookies have a maximum length(I don't know how much is it) which isn't the best way because it has security issues and a use-case of cookies is using them on the server-side by the backend.
I'm developing a social app using Vue.js and Vuex store to keep app's relevant variables around.
Now I'm wondering if there are any best practices as to which parameters are better to be kept in browsers's localStorage?
Currently I keep token in localStorage, but wondering whether I should also keep username and other pertinent user data in localStorage, in order to preserve them from being perished on page refresh?
There's no correct answer here; just some thoughts:
Unless you have a good reason to, I wouldn't store the username in local storage. What advantage would you have by dong so? If the user logged in to their account from a different browser and changed their username, that would invalidate the username stored in local storage on other browsers. Most users expect that reloading the page should completely refresh all the data. People will think your site is broken if they reload the page and the username didn't update. The less stuff you store in local storage, the less you need to worry about the data becoming stale.
At a minimum, you should definitely store authentication token in local storage. From that, you can make requests to the server on page load to obtain all other data including the user itself.
I do not think that you need to store anything in local storage at all. If you have some authentication setup, you could store just your token in a session cookie and retrieve all needed data from the server.
Trying to keep the saved data on the client to a minimum is a good idea. Just keep the token in cookie, retrieve username (and so on) from the server when first loading the page. The retrieved data can be stored in some javascript vars. These values get only cleared on a page reload and then you have to retrieve them once from the server.
Reloads should not occur often or not at all, when you have a single page app.
Team, We have implemented a single page application, where we are storing some data in root scope to access in other pages of an application. Everything works fine in normal flow. We hit the problem on browser refresh. When user in one of our application pages, if user refreshes the page, whole data is lost from root scope. We tried not allowing to refresh. But, we found that it is not possible and not even able add custom message to notify the user. Now, we are just logging out the user whenever he refresh the page, which is an awkward to user and that too our application doesn't need that much security. So, we are thinking to add whole root scope data in local storage on refreshing the page and after reloading the page, we would again load whole data from local/ session storage data to root scope. We have to do this at single place. So, we don't have to implement this at individual module page.
Is there a way to achieve this. Can any one please suggest if have an alternate way.
Be aware that HTML5 Local Storage only has 800kb-10mb depending on the browser. I heard Safari has 99 idk. 5mb in the latest Google Chrome (2/14/17).
Anyway, you can create a local storage by stringifying to JSON:
localStorage.setItem('myDataStorage', JSON.stringify(myData));
Then retrieve them
var myRetrievedData = JSON.parse(localStorage.getItem('myDataStorage'));
myDataStorage is the name of your created localStorage. You can use different names to create multiple localStorages if you would, just be aware that each one is limited only in size. Don't expect to save HD images much less videos using HTML local storage
That being done, your retrieved data can now be manipulated by your code using the variable myRetrievedData (or whatever variable name you want)
I am currently working on a mobile app..where I am fetching a response from a REST GET call.
Every thing is perfect. But , I want expert suggestion on how to re-render this data if user reloads the page.. or what is the best way to handle this scenario. Caching / storage won't help me here as this is sensitive data.
Need expert opinion please?
Maybe you should consider session storage. It will persist only as long as the current session is active (until tab or window is closed), and you can certainly think of additional security strategies, such as encryption and expiration.
Build an AngularJS service for your data source which will first query the session storage as a cache, before bothering your servers. I'd recommend creating a service that wraps session storage itself - maybe call it a ThingCache - that would be injected into the main data service.