skip to content

JavaScript: Saving Form Values using Cookies

 Tweet1 Share0 Tweets

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:

  1. enter values in the form and click on Submit;
  2. the form calls JavaScript to set four cookies: field1, field2, field3, field4; and
  3. 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 type="text/javascript"> // Original JavaScript code by Chirp Internet: www.chirp.com.au // 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 function setCookie(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 type="text/javascript"> function storeValues(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):

  1. display the FORM as before, with no values entered; and then
  2. use JavaScript to read the cookies and insert their values into the FORM:
<script type="text/javascript"> 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 type="text/javascript"> var expired = new Date(today.getTime() - 24 * 3600 * 1000); // less 24 hours function deleteCookie(name) { document.cookie=name + "=null; path=/; expires=" + expired.toGMTString(); } </script>

The form button that deletes the cookies calls this function:

<script type="text/javascript"> function clearCookies() { deleteCookie("field1"); deleteCookie("field2"); deleteCookie("field3"); deleteCookie("field4"); alert('Your cookies have been deleted!'); } </script>

< JavaScript

Send a message to The Art of Web:


used only for us to reply, and to display your gravatar.

CAPTCHA

<- copy the digits from the image into this box

press <Esc> or click outside this box to close

User Comments

Post your comment or question

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.

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

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

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)

top