The process of setting the cookies is as follows:
- enter values in the form and click on Submit;
- 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
The setCookie function is called by the form using the following function:
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
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.
The form button that deletes the cookies calls this function:
Related Articles - Cookies
- PHP Saving a list of values in a cookie