I am working on Issue where user has to go to some other page / url while filling a form. And after filling some data there in a form will come back to the page where he was previously filling the form. I can't combine the form because there are different forms which user has to filled. So i want to sustain the data user filled in first form before going to the other page for filling the data. For this i can use the localstorage of the browser or can use the django session. But in my forms there are several file fields which can have images, videos, audios and attachments upto 20 mb. So i don't know that will the browser support this much of data in localstorage or will django session store it.
And I want to know if i serialize the form and store it to the local storage then will i be able to put that data back to the fields using the javascript. I don't want to use django form wizard which is not seems feasible because I am using Ajax for sending requests and Need to go to another page from half of the form.
Guidance will be appriciated.
The key problem you have here is the size of the data.Here are the limitations of it :
Firefox can use IndexedDB, LocalStorage and SessionStorage.
LocalStorage and SessionStorage can use up to 10MB of storage but the
number is actually the sum of both. For IndexedDB, you can use up to
50MB on desktop, 5MB on mobile for free. However, the user can allow
the limit to be removed by granting permission.
What is the max size of localStorage values ?
Related
I have a form and wanted to retain its values when form loads without using any web storage.
I want to use only Javascript or jQuery. Moreover, I want that form values such as radio and dropdown selected value should retain its previous filled values.
You can either use browser cache or cookies to retain data on the client side. But both have their own limitations. Smartphone Browser native cache is about 5x times slower than local storage and information about cookies is sent to the server in the request header when a user visits a page that has cookies associated with it.
I made a webpage (todo app) that uses locale storage for saving the data in json format. I use it on my smartphone (android) so all data is stored locally on my device (ca 200 kB)
Now, I would like to backup the data somehow. I have tried different approaches (email, post form, copy-paste) but none of them has worked so far. Is there an easy straigt foreward way to do this?
You don't have control over the localStorage to that extend. But there are several ways to store data across different storages (e.g. evercookie) even though I would not use that at all (not sure how legal that is, if at all)
But the best way would probably be to backup the data on your server and periodically let your users send their localStorage to you if there were changes.
If the localStorage got wiped, then just ask the server to send back the last stored set of data for that user.
If you are using Cordova/Phonegap you might want to look into http://docs.phonegap.com/en/1.4.1/phonegap_file_file.md.html#FileWriter to create a copy of the localStorage as physical file.
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
I know, localStorage supports up to 5MB only. In our application we are planning use localStorage (sessionStorage doesn't fits for our need, since we support multiple tabs). Currently there is only one big javascript object serialized and stored in localStorage, in the future it may exceed up to 15 objects but definitely not more than that.
The problem is, clearing the localStorage. Since our application allows user to login in multiple ways (SSO etc...). So without landing in Login page, they can login into our application and as well as signing off in other application will sign off in our application too or close the browser. For security reason, we need to clean the localStorage once the user session is over.
So we planned to store the personId in localStorage, in every page request along with the html response we send the personId from the server, and if it doesn't match with the localStorage's personId then it will clear the localStorage.
My doubt here is, search in localStorage is not asynchronous so will it take much time to search personId out of 15 keys (Which has some large string as value)?
localStorage.setItem("personId", 1234);
localStorage.setItem("object1", "A very big serialized form of javascript object gets stored");
Writing values is really fast and there is no significant difference between large and short values: http://jsperf.com/local-storage-set
You can test the search on this site too... You could share the search code too, so others can take a look on it.
For my web application, I need to store form inputs spanning across multiple pages, until I finally process/manipulate them to produce some results (its mostly formatting the data entered and presenting it in some layout). The options I think I have are -
Keep sending user's inputs to the server, store it there in some database, do the final manipulation there only, and show the result.
Store the inputs in browser's storage as the user fills the forms, and finally use this stored data to manipulate and show results.
I very much want to use the second method, and perhaps a possible way is using cookies, but I'm afraid I might just hit some upper limit of cookie data storage. I'm also open to understanding the merits of the first method, or any third method.
thanks.
Use webstorage (you can client-side store around 5MB of text or binary data)
Firefox demo: http://codebase.es/test/webstorage.html
DOM Storage is supported in these web browsers:
Internet Explorer 8
Firefox 2 for sessionStorage, 3.5 for localStorage
Safari 4
Just google for sessionStorage and localStorage objects.
Also modern webkit browsers supports client-side sql.
Edit:
I'm not sure about what you want to do but using AJAX you can store everything in javascript variables and serverside databases or sessions are a good choice.
Hitting the storage limit of the cookie could indicate you are trying to store too much on the client side. It might be prudent to store it serverside, in something like a session. The key to the session could then be stored in a cookie.
An alternative method is to not have the requests span multiple pages, and just store the data on the client side, not as a cookie, but as different form fields and/or text fields (they could be hidden). The merit of such a method is it doesnt hit the cookie limit as you have. It also makes your serverside code easier/cleaner, since it doesn't have to keep track of state (something you'd always have to do if spanning across pages, and thus the reason you are hitting the cookie limit in the first place).
You could use a small Flash Movie to store some data via Flash's Shared Memory Api or have a look at Google Gears.
Maybe also consider, that every byte you store in the cookie have to be transmitted everytime you website makes a request to the server.
Generally cookies have a max size of 4k so you could store quite a bit of data in there.
Be careful with validating all information that lives cookies - all the information resides on a client browser and can easily be manipulated by users of the site at any time.
You didn't say which platform you use. Spring Webflow does exactly the kind of form processing that you want:
http://www.springsource.org/webflow
Even if you don't use Java you could use some of the principles.
Edit: One more drawback of big/complex persistent cookies is that you have to make sure that any new code you deploy is backwards compatible with all the cookies that are out in the wild.
I would suggest storing the data in a session variable until you get to the final step rather than a cookie. I think this would be safer for your data as the user does not have direct access to the data, so you can validate as you go.