We're using React redux, which is fantastic. However, the moment someone refreshes their browser we lose the Redux store and as a result the application breaks or needs to redirect back to the 'start'.
We are using the Query-string to manage this, but I have been told Management this is 'Ugly' and we should find an alternate place to hold this information and remove it from the URL.
My understanding is we could use a number of things; Cookies, local storage, session storage etc.
However, I don't know which is the best to use.
We're essentially just looking for somewhere to move the information contained in the URL. E.G. https://url.com?querystring=12345&non-sensitive-id=2242
Edit: We're using Typescript, so ideally having a typesafe option would be ideal. We can achieve this with querystrings.
You can use localStorage of HTML5.
To store data:
//To store data:
localStorage.setItem("key", 'value');
//To access data:
localstorage.getItem("key");
//and to remove from local storage,
localStorag.removeItem("key");
Related
The Question
I was wondering if there is any way of having the same visible URL for the client while being able to handle internationalization.
My use case
I want my users to have universal access to pages and hide the locales from the URL path. If a user shares a link with another user, the content should be loaded in the preferred language of the current user that opens the page.
I'm fetching localized data on the server-side with getServerSideProps and caching the result with Cache-Control for 5-10 minutes. So, passing locale as a query parameter (?lang=en, ?lang=ca, etc) probably won't work as the cached results should be different for different locales.
What I have done before
My app was written entirely in React and I'm now moving to Next.js. I used to pass the locale in a URL query parameter like ?lang=en. I would then store that locale in the localStorage, send API requests with the given locale, and change the app's appearance accordingly.
That used to work fine, but now I want to make use of the server-side rendering and request caching, which makes things more complicated.
This seems to be a common use case. Is there any way to handle the internationalization without explicitly changing the URL? Or maybe having one URL at first and then hiding some parts after? Any kind of idea/workaround would be really appreciated!
I'm trying to get a similar result. So far I haven't found a way to get rid of the local part in the url (I use next-i18next).
But I managed to handle the "content must be loaded in the preferred language of the user opening the page" part with cookie and middleware with the following
const url = request.nextUrl.clone();
url.locale = userPreferredLanguage;
url.pathname =
request.nextUrl.pathname === '/'
? `/${userPreferredLanguage}`
: `/${userPreferredLanguage}${request.nextUrl.pathname}`;
return NextResponse.redirect(url);
I am using angular file upload for my project. referring the below link I have worked my project
http://nervgh.github.io/pages/angular-file-upload/examples/simple/
My requirement is once I select a file or multiple file if I refresh also it should not remove from the queue.
I tried to use localstorage but its not working
Here is the code where I have used local storage.
uploader.onAfterAddingAll = function(addedFileItems)
{
console.info('onAfterAddingAll', addedFileItems);
$localStorage.allfiles= addedFileItems;
};
At the end I did get console but it is showing empty.
console.log($localStorage.allfiles);
Please any one can help on this will be a great help
Ok so before starting please go through MDN Web Storage API. It states that
The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.
So localStorage can store key value pairs and as of now only string values are supported. It can not store files. So you wont be able to achieve what you are trying as you want to store file and that's not supported.
Also if you want to store objects you will have to stringify them and then store.
One suggested solution i have is you can convert your files to a bytes array and then store them and then you can handle those bytes the way you want.
Also this might help you I think thats waht you want . Mozilla Hacks Storing Images in localStorage
Once the image is saved as data url which is base 64 encode. You just need to send the string to the server and decode it with base 64
I need to store userdata, should be available to entire application, should be accessible to required controllers, after searching I found a few options to store.
using a service to controllers
$sessionStorage
$localStorage
of all the above could u please tell me which is the best practice? Or is there any other solution other than the above 3.
Using a simple google search might have told you a lot about the best thing? there is no single best thing it's all depends upon your use case.
Services are the best way to interchange data between controllers.
if you don't want to persist the data(if data don't want to be there if the page is reloaded) you can use a service, If you want to persist the data you can use localstorage.
I am new to Angular JS, have experience on building spring web applications.
My requirement is to store the some session preferences (Not part of the user Model/entity) into session. I need to use them through out the application.
I couldn't find the right way to do it. I found some options, need suggestion on which one to use it.
ngStorage - can access Local/session storage and store attributes in it.
LocalStorageService - another githubproject, i can use it to store in session storage/ local storage.
Based on the articles i found, localstorage keeps the data even after logout, so have to make sure i clean all of them after logout.
What is the common practice to store session attributes?
I am planning to use ngStorage directive and use sessionstorage and store it by encoding with Base64. Is it a good way to do it?
I am using Java 1.7 and Angular JS for building an application. I have used JHipster to generate the application.
Any Help Appriciated!!!!
welcome! Well, depends the situation, localStorage is an excellent option to store attributes, but yes, it has some limitations and you have to remember to delete this. Another options is to use Cookies of angular project to store attributes on Client Side. I used in some projects and works perfectly for my use case. But if you are using Java, the best way is protect this session attributes using Java HttpServletSessions. I Hope it helps.
i had the same issue and i resolved by find the answer of this question: https://stackoverflow.com/a/922058/5995665
I hope it helps.
In my app I want to keep track of what the user created, so he doesn't have to do it everytime he closes the app
I have no idea how to do so, except that it might be with XML or JSON.
I have no access to a server, it need to be on the device's memory.
Could someone guide me on what i Need to undersand and what i need to use?
Check Sencha localStorage proxy class http://docs.sencha.com/touch/2.1.1/#!/api/Ext.data.proxy.LocalStorage
It's wrapper around HTML5 local storage capabilities.