Cookie size restriction in IE - javascript

I need to save a form state (values for input elements).
But the form is not a standard html form so the browser would not save the form state.
I need to store the form state as cookie I cannot save anything on server side.
But the size of the cookie will be around 10 KB. How to do this? Anyone have a idea?

Split the 10KB of data into multiple cookies (i.e. cookies with different names in the same domain) when saving and combine those cookie values when retrieving.
If I recall correctly, the standard size of a cookie in most modern browsers is ~4096 bytes (sometimes including the name, sometimes not) so bear this in mind when creating the cookies.
Also bear in mind that the data in the cookies could be tampered with so exercise due diligence when working with such data.

Related

Increasing cookie max length in Chrome?

Google Chrome browser (v109) seems to enforce a maximum length for cookies set using JavaScript document.cookie.
Is it possible to increase the cap with manual browser configuration by the user?
According to RFC 1012 cookie size must not be limited by user agent.
Chrome supports HTML5 localStorage that allows you to use a dictionary style look up. You can use this to store larger amounts of data instead of passing them back and forth using cookies.
If you must use cookies, You can't change the cookie size but you can use several cookies and span your data across them, keeping one cookie as a pointer to other cookies so you know what they're called, how many there are, etc (like a partition table on a harddisk).

Django Sessions Vs Browser Local Storage

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 ?

Backup local storage from smartphone

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.

Searching and clearing LocalStorage

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.

Storing persistent data in browser

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.

Categories

Resources