JavaScript: Saving Form Values using Cookies
Enter your values in the form below and submit. JavaScript is used to set a cookie for each value. When you return, the form is automatically populated with the cookie values.
Working Example
The process of setting the cookies is as follows:
- enter values in the form and click on Submit;
- the form calls JavaScript to set four cookies: field1, field2, field3, field4; and
- the form is then submitted, taking you to the next page.
The values you enter in the form will be remembered on this page and throughout The Art of Web website until they expire or are deleted. You can delete them also by clicking on the relevant button above.
The setCookie() function
<script>
// Original JavaScript code by Chirp Internet: www.chirpinternet.eu
// Please acknowledge use of this code by including this header.
var today = new Date();
var expiry = new Date(today.getTime() + 30 * 24 * 3600 * 1000); // plus 30 days
var setCookie = function(name, value) {
document.cookie=name + "=" + escape(value) + "; path=/; expires=" + expiry.toGMTString();
};
</script>
The setCookie function is called by the form using the following function:
<script>
var storeValues = function(form) {
setCookie("field1", form.field1.value);
setCookie("field2", form.field2.value);
setCookie("field3", form.field3.value);
setCookie("field4", form.field4.value);
return true;
};
</script>
A better method would be to store all the values in a single cookie. Most browsers have a limit on how many cookies they can store at any one time (per domain as well as in total numbers) so using too many cookies can lead to loss of data.
Loading cookie values into the form
Then, when you come back to this page (or another page where the cookies are accessible):
- display the FORM as before, with no values entered; and then
- use JavaScript to read the cookies and insert their values into the FORM:
<script>
if(field1 = getCookie("field1")) document.myForm.field1.value = field1;
if(field2 = getCookie("field2")) document.myForm.field2.value = field2;
if(field3 = getCookie("field3")) document.myForm.field3.value = field3;
if(field4 = getCookie("field4")) document.myForm.field4.value = field4;
</script>
The tricky here is that these lines need to appear in the HTML only after the form has been displayed. Otherwise they will be trying to access form fields that don't yet exists.
Also if you look at the source you'll see that we gave the form a name (myForm) which we're now using to reference it's fields. These days it's more common to assign an id to the form and reference it using document.getElementById() instead of document.formname, but that's another story.
The deleteCookie() function
To properly delete a cookie we actually set a new cookie, but with an expiry date that is in the past. The overwrites the previous cookie and the new one instantly expires.
<script>
var expired = new Date(today.getTime() - 24 * 3600 * 1000); // less 24 hours
var deleteCookie = function(name) {
document.cookie=name + "=null; path=/; expires=" + expired.toGMTString();
};
</script>
The form button that deletes the cookies calls this function:
<script>
var clearCookies = function() {
deleteCookie("field1");
deleteCookie("field2");
deleteCookie("field3");
deleteCookie("field4");
alert('Your cookies have been deleted!');
};
</script>
Related Articles - Cookies
- JavaScript Saving Form Values using Cookies
- JavaScript Using cookies to set Preferences
- JavaScript Retrieving values from Cookies
- PHP Saving a list of values in a cookie
Mohd Ahmed 17 October, 2019
What about sanitizing the input fields before you save as cookie ? Some characters like = , ; are reserved and if the user puts them into a field then this would break the code.
Also am not sure if spaces are allowed ?
What type of encoding do you think would be needed.
In the function we use escape() which should be sufficient.
saurav verma 25 May, 2016
ey, I've a question. Can we store cookie value for multiple users so that if a user visits on page then it's data must not be replaced when another user submit it's information.
Cookies are stored in the web browser of the individual user and not on the website/server, so every user has their own cookie.
Gun Lengend 28 October, 2013
Hello there,
Can i ask a question : Why here not have getCookie Function ? I looking around google and found in w3c, so should i write a getCookie function or not ?
getCookie function
Adam 5 July, 2013
Hi thanks for the tutorial! I have noticed you have not defined the code for the getCookie() function. can you please give the code you use to return the cookie?
thank you
Retrieving values from Cookies
Josyula 20 June, 2012
Thats great thanks! I'm a newbie this might probably be stupid but , What if i want you enter new values again,How do i do it?
To change a cookie, just set it again with a different value (and the same path)