JavaScript: Cookies - store and retrieve visitor data and preferences
This page demonstrates how to process Cookies using JavaScript.
On this page: a fast track summary.
For a simple create cookie function 'setCookie()' with the ability to set the cookie name, value and expiry date together with the path: code snippet 3 is what you need.
To retrieve the contents of a cookie identified by its name then function 'getCookie()': code snippet 4 will suit your requirements.
To delete a cookie identified by its name then function 'deleteCookie()': code snippet 5 will do the job.
A more sophisticated create cookie function with the ability to specify all six (6) cookie arguments including domain and security: code snippet 8 is what you require.
For deletion of these sophisticated cookies: code snippet 9 will do the job.
The use of cookies: the security of personal information and Internet privacy.
Some questions and answers on these issues are covered in Cookies and security issues.
JavaScript code snippets listed by task and organised in a tutorial style each building on the previous example. New topics are introduced when required.
Let us start by experimenting with creating cookies and storing some values. |
|
1. |
Creating a simple transient cookie to store a single value: the time. Comparing the current computer time and the time stored in the transient cookie. Transient cookies are no longer available when the browser is closed, sometimes called session cookies. |
2. |
Creating a simple transient cookie to store multiple values. Example of storing two (2) values in a single cookie. Using ':' and '|' characters as separators (delimiters) to differentiate between the descriptors and the values, for example "name:eric|species:a penguin". Use of 'escape()' to clean the cookie values. Reading the descriptors and values from the transient cookie. |
|
Single or multiple cookies with single or multiple values: an explanation.When utilising a single cookie with a single value or multiple cookies with single values then it is straightforward to extract the single value from the cookie by naming the cookie and retrieving its value: see code snippet 4
When utilising single or multiple cookies containing multiple values then you need some system to identify, separate (delimit) the values within the cookie. Each individual value can be given its own descriptor to identify it with a suitable delimiting character to separate the descriptor and its value, I have used ':', for example "name:eric". You also need to separate the multiple values with a suitable delimiting character, I have used '|', for example "name:eric|species:a penguin". You then need to be able to retrieve and separate the descriptor from its value: see code snippets 10 and 11.
Note: the choice of which characters you use as separators is up to you. Problems arise when one of those characters is entered by a visitor into the cookie value. Therefore more elaborate separators can be used with character combinations that are unlikely to be entered by a visitor, for example: 'qq:qq' and 'qq|qq'. |
Here are some simple cookie functions to make the task easier. |
|
3. |
A create cookie function 'setCookie()' with 3 arguments. Giving the ability to set the cookie name, value and expiry date together with 'path=/' so the cookie is accessible to all the web pages on the domain. Only the name and value arguments are mandatory to set a cookie. Using this function to create a persistent cookie. Setting the expiry date of the persistent cookie to a time in the future. Persistent cookies can remain on the user's machine after the browser is closed. |
4. |
A function 'getCookie()' to retrieve the contents of a cookie identified by its name. Use of 'indexOf()', 'substring()' and 'unescape()'. Write out the value from the cookie. |
5. |
A function 'deleteCookie()' to delete a cookie identified by its name. Delete a cookie by setting the expiry date in the past. |
Let's pass some values around. |
|
6. |
Passing cookie values from page to page using multiple cookies and the 'get' request. Using a form to collect the values from the user. The default 'get' request method attribute of the form appends the cookie values to the URI. Using persistant cookies. |
7. |
Passing cookie values from page to page using multiple cookies and the 'post' request. Using a form to collect the values from the user: user's personal information. Use of the 'post' request method attribute of the form to hide the cookie values being passed. Using transient cookies so that the personal information is not available once the browser is closed. |
Some more sophisticated cookie functions. |
|
8. |
A universal create cookie function 'setCookie()' with 6 arguments. Giving the ability to set the cookie name, value, expiry date, path, domain and security. Setting security so that the cookie can only be accessed from a secure site incorporating SSL and the https protocol. |
9. |
A universial delete cookie function 'deleteCookie()' with 3 arguments. Satisfying the requirement to match the same name, path and domain as when the cookie was created for cookie deletion. |
Let's split some values apart. |
|
10. |
Separating the descriptor from its value in a single cookie using the 'split()' method. Create a persistent cookie to store a value using ':' character to differentiate between the descriptor and value. Retrieve the contents of the cookie identified by its name and combining this with the 'split()' method to separate the descriptor and value.
For a brief explanation on single, multiple cookies and separators see above entitled: 'Single or multiple cookies with single or multiple values: an explanation' |
11. |
Separate mutiple descriptors and values in a single cookie using the 'split()' method. Create a transient cookie to store mutiple descriptors and values separated by ':' and '|' characters. Retrieve the contents of the cookie identified by its name and combining this with the 'split()' method to separate the descriptors and values. Display the resulting split cookie contents in a bar chart. |
12. |
Build on the above and learn more about JavaScript in the Code library. Why not start with the JavaScript: Extras page. |
| Suggest a code snippet to add to this category. | |
Back to top.
Copyright © 2006-2012 justfigures.co.uk
