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 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):
- 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 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>
Related Articles
- Using cookies to set Preferences
- Saving Form values using Cookies
- Retrieving values from Cookies
