Handling Cookies in JavaScript
Cookies are small pieces of data that are stored in the browser and associated with a particular website. They can be used to store user preferences, track user behavior, and more. In this tutorial, we will learn how to work with cookies in JavaScript.
Writing Cookies
To write a cookie, you can use the setCookie
function:
function setCookie(name, value, expires, path, domain, secure) {
var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
if (expires) cookie += '; expires=' + expires.toGMTString();
if (path) cookie += '; path=' + path;
if (domain) cookie += '; domain=' + domain;
if (secure) cookie += '; secure';
document.cookie = cookie;
}
This function takes the following parameters:
name
: the name of the cookievalue
: the value of the cookieexpires
: aDate
object that specifies when the cookie should expirepath
: the path for which the cookie is validdomain
: the domain for which the cookie is validsecure
: a boolean value that specifies whether the cookie should only be sent over secure connections
Here is an example of how to use the setCookie
function:
Cookie('user', 'John Doe', new Date(2022, 12, 31), '/', 'example.com', true);
This will create a cookie named user
with the value 'John Doe'
that expires on December 31, 2022, is valid for the root path of example.com
, and is only sent over secure connections.
Reading Cookies
To read a cookie, you can use the getCookie
function:
function getCookie(name) {
var nameEQ = encodeURIComponent(name) + '=';
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i];
while (cookie.charAt(0) === ' ') cookie = cookie.substring(1, cookie.length);
if (cookie.indexOf(nameEQ) === 0) return decodeURIComponent(cookie.substring(nameEQ.length, cookie.length));
}
return null;
}
This function takes the following parameter:
name
: the name of the cookie to read
It returns the value of the cookie, or null
if the cookie does not exist.
Here is an example of how to use the getCookie
function:
var user = getCookie('user'); console.log(user); // 'John Doe'
This will read the user
cookie and log its value to the console.
Deleting Cookies
To delete a cookie, you can set its expiration date to a date in the past using the setCookie
function:
setCookie('user', '', new Date(1970, 1, 1), '/', 'example.com', true);
This will delete the user
cookie by setting its expiration date to January 1, 1970.
Full Example
Here is an example of how to use the setCookie
, getCookie
, and deleteCookie
functions in a complete JavaScript program:
function setCookie(name, value, expires, path, domain, secure) {
var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
if (expires) cookie += '; expires=' + expires.toGMTString();
if (path) cookie += '; path=' + path;
if (domain) cookie += '; domain=' + domain;
if (secure) cookie += '; secure';
document.cookie = cookie;
}
function getCookie(name) {
var nameEQ = encodeURIComponent(name) + '=';
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i];
while (cookie.charAt(0) === ' ') cookie = cookie.substring(1, cookie.length);
if (cookie.indexOf(nameEQ) === 0) return decodeURIComponent(cookie.substring(nameEQ.length, cookie.length));
}
return null;
}
function deleteCookie(name, path, domain, secure) {
setCookie(name, '', new Date(1970, 1, 1), path, domain, secure);
}
setCookie('user', 'John Doe', new Date(2022, 12, 31), '/', 'example.com', true);
console.log(getCookie('user')); // 'John Doe'
deleteCookie('user', '/', 'example.com', true);
console.log(getCookie('user')); // null
This program will create a user
cookie with the value 'John Doe'
, read the value of the cookie, and then delete the cookie.
I hope this tutorial helps you understand how to handle cookies in JavaScript. Let me know if you have any questions!
That's it.