How to Manage Cookies in JavaScript

Jeremy Jeremy (10)
Total time: 5 minutes 
Updated: July 22nd, 2020

At some point you’ll want to read, set, and remove cookies using JavaScript. This is actually way more complicated than it should be so I’ll provide a few example functions and refer you to a solid jQuery plugin.

Posted in these interests:

javascript
PRIMARY
27 guides
code
68 guides

First you should understand what the cookie is and how it’s set. A cookie is a string that is stored on the user’s computer to allow data to persist throughout the user’s session. Cookies are often set by HTTP response headers, but they can also be set directly in the browser using JavaScript. To read the entire cookie string you can access document.cookie.

document.cookie
What you’ll likely see is a long string of semi-colon delineated key/value pairs.
ps=31;_ssd3=P0-1415818163-1436218393727;favorite_animal=goat;_gaa=23.00334.....

You can manually set a cookie by setting document.cookie equal to the desired cookie using this format:

document.cookie = "name=tyler;expires=Thu, 03 Sep 2015 05:33:44 GMT";
This can be a little cumbersome, so the function below should make things easier.
function setCookie(name, value, exdays) { var d, expires; exdays = exdays || 1; d = new Date(); d.setTime(d.getTime() + (exdays2460601000)); expires = "expires=" + d.toUTCString(); document.cookie = name + "=" + value + "; " + expires; }
To set a cookie that lasts for one year, you could use:
setCookie('name', 'Batman', 365);

To read a cookie you can simply access document.cookie.

console.log(document.cookie);
If you’re searching for a specific value you can use the following function.
function getCookie(name) { var cookie, c; cookies = document.cookie.split(';'); for (var i=0; i < cookies.length; i++) { c = cookies[i].split('='); if (c[0] == name) { return c[1]; } } return ""; }
This function uses JavaScript’s string split method to split the cookie string by semi-colons. Then it loops through the result array of strings and splits them again by “=” producing the cookie key/value pair. Then it simply tests the cookie key (c[0]) against the name of the cookie you are trying to read. If it matches it returns the value (c[1]).

To delete a cookie, you simply need to expire it. So deleting a cookie is basically setting the cookie with an expiration in the past. Using our setCookie function:

setCookie('name', '', -1);

If you’re using jQuery, you might as well use this cookie plugin. It allows easy management of cookies.

// read $.cookie('name'); // => "Batman" // set $.cookie('name', 'Iron Man'); // delete $.removeCookie('name');

How to Manage Cookies in JavaScript

Jeremy Jeremy (10)
Total time: 5 minutes 
Updated: July 22nd, 2020

At some point you’ll want to read, set, and remove cookies using JavaScript. This is actually way more complicated than it should be so I’ll provide a few example functions and refer you to a solid jQuery plugin.

Posted in these interests:

javascript
PRIMARY
27 guides
code
68 guides

First you should understand what the cookie is and how it’s set. A cookie is a string that is stored on the user’s computer to allow data to persist throughout the user’s session. Cookies are often set by HTTP response headers, but they can also be set directly in the browser using JavaScript. To read the entire cookie string you can access document.cookie.

document.cookie
What you’ll likely see is a long string of semi-colon delineated key/value pairs.
ps=31;_ssd3=P0-1415818163-1436218393727;favorite_animal=goat;_gaa=23.00334.....

You can manually set a cookie by setting document.cookie equal to the desired cookie using this format:

document.cookie = "name=tyler;expires=Thu, 03 Sep 2015 05:33:44 GMT";
This can be a little cumbersome, so the function below should make things easier.
function setCookie(name, value, exdays) { var d, expires; exdays = exdays || 1; d = new Date(); d.setTime(d.getTime() + (exdays2460601000)); expires = "expires=" + d.toUTCString(); document.cookie = name + "=" + value + "; " + expires; }
To set a cookie that lasts for one year, you could use:
setCookie('name', 'Batman', 365);

To read a cookie you can simply access document.cookie.

console.log(document.cookie);
If you’re searching for a specific value you can use the following function.
function getCookie(name) { var cookie, c; cookies = document.cookie.split(';'); for (var i=0; i < cookies.length; i++) { c = cookies[i].split('='); if (c[0] == name) { return c[1]; } } return ""; }
This function uses JavaScript’s string split method to split the cookie string by semi-colons. Then it loops through the result array of strings and splits them again by “=” producing the cookie key/value pair. Then it simply tests the cookie key (c[0]) against the name of the cookie you are trying to read. If it matches it returns the value (c[1]).

To delete a cookie, you simply need to expire it. So deleting a cookie is basically setting the cookie with an expiration in the past. Using our setCookie function:

setCookie('name', '', -1);

If you’re using jQuery, you might as well use this cookie plugin. It allows easy management of cookies.

// read $.cookie('name'); // => "Batman" // set $.cookie('name', 'Iron Man'); // delete $.removeCookie('name');
Jump to step

How to Manage Cookies in JavaScript

Jeremy Jeremy (10)
Total time: 5 minutes 
Updated: July 22nd, 2020

At some point you’ll want to read, set, and remove cookies using JavaScript. This is actually way more complicated than it should be so I’ll provide a few example functions and refer you to a solid jQuery plugin.

Posted in these interests:

javascript
PRIMARY
27 guides
code
68 guides

First you should understand what the cookie is and how it’s set. A cookie is a string that is stored on the user’s computer to allow data to persist throughout the user’s session. Cookies are often set by HTTP response headers, but they can also be set directly in the browser using JavaScript. To read the entire cookie string you can access document.cookie.

document.cookie
What you’ll likely see is a long string of semi-colon delineated key/value pairs.
ps=31;_ssd3=P0-1415818163-1436218393727;favorite_animal=goat;_gaa=23.00334.....

You can manually set a cookie by setting document.cookie equal to the desired cookie using this format:

document.cookie = "name=tyler;expires=Thu, 03 Sep 2015 05:33:44 GMT";
This can be a little cumbersome, so the function below should make things easier.
function setCookie(name, value, exdays) { var d, expires; exdays = exdays || 1; d = new Date(); d.setTime(d.getTime() + (exdays2460601000)); expires = "expires=" + d.toUTCString(); document.cookie = name + "=" + value + "; " + expires; }
To set a cookie that lasts for one year, you could use:
setCookie('name', 'Batman', 365);

To read a cookie you can simply access document.cookie.

console.log(document.cookie);
If you’re searching for a specific value you can use the following function.
function getCookie(name) { var cookie, c; cookies = document.cookie.split(';'); for (var i=0; i < cookies.length; i++) { c = cookies[i].split('='); if (c[0] == name) { return c[1]; } } return ""; }
This function uses JavaScript’s string split method to split the cookie string by semi-colons. Then it loops through the result array of strings and splits them again by “=” producing the cookie key/value pair. Then it simply tests the cookie key (c[0]) against the name of the cookie you are trying to read. If it matches it returns the value (c[1]).

To delete a cookie, you simply need to expire it. So deleting a cookie is basically setting the cookie with an expiration in the past. Using our setCookie function:

setCookie('name', '', -1);

If you’re using jQuery, you might as well use this cookie plugin. It allows easy management of cookies.

// read $.cookie('name'); // => "Batman" // set $.cookie('name', 'Iron Man'); // delete $.removeCookie('name');

How to Manage Cookies in JavaScript

Jeremy Jeremy (10)
Total time: 5 minutes 
Updated: July 22nd, 2020

At some point you’ll want to read, set, and remove cookies using JavaScript. This is actually way more complicated than it should be so I’ll provide a few example functions and refer you to a solid jQuery plugin.

Posted in these interests:

javascript
PRIMARY
27 guides
code
68 guides

How to Manage Cookies in JavaScript

javascriptcode
Jeremy Jeremy (10)
Total time: 5 minutes 
Updated: July 22nd, 2020
Jeremy
1
 

Posted in these interests:

javascript
PRIMARY
27 guides
code
68 guides
javascript
PRIMARY
27 guides
code
68 guides
PRIMARY
Jump to step
Calling all writers!

We’re hiring. Write for Howchoo

1
 
In these interests
javascript
PRIMARY
27 guides
code
68 guides
javascript
PRIMARY
27 guides
code
68 guides
PRIMARY
Jump to step

First you should understand what the cookie is and how it’s set. A cookie is a string that is stored on the user’s computer to allow data to persist throughout the user’s session. Cookies are often set by HTTP response headers, but they can also be set directly in the browser using JavaScript. To read the entire cookie string you can access document.cookie.

document.cookie
What you’ll likely see is a long string of semi-colon delineated key/value pairs.
ps=31;_ssd3=P0-1415818163-1436218393727;favorite_animal=goat;_gaa=23.00334.....

You can manually set a cookie by setting document.cookie equal to the desired cookie using this format:

document.cookie = "name=tyler;expires=Thu, 03 Sep 2015 05:33:44 GMT";
This can be a little cumbersome, so the function below should make things easier.
function setCookie(name, value, exdays) { var d, expires; exdays = exdays || 1; d = new Date(); d.setTime(d.getTime() + (exdays2460601000)); expires = "expires=" + d.toUTCString(); document.cookie = name + "=" + value + "; " + expires; }
To set a cookie that lasts for one year, you could use:
setCookie('name', 'Batman', 365);

To read a cookie you can simply access document.cookie.

console.log(document.cookie);
If you’re searching for a specific value you can use the following function.
function getCookie(name) { var cookie, c; cookies = document.cookie.split(';'); for (var i=0; i < cookies.length; i++) { c = cookies[i].split('='); if (c[0] == name) { return c[1]; } } return ""; }
This function uses JavaScript’s string split method to split the cookie string by semi-colons. Then it loops through the result array of strings and splits them again by “=” producing the cookie key/value pair. Then it simply tests the cookie key (c[0]) against the name of the cookie you are trying to read. If it matches it returns the value (c[1]).

To delete a cookie, you simply need to expire it. So deleting a cookie is basically setting the cookie with an expiration in the past. Using our setCookie function:

setCookie('name', '', -1);

If you’re using jQuery, you might as well use this cookie plugin. It allows easy management of cookies.

// read $.cookie('name'); // => "Batman" // set $.cookie('name', 'Iron Man'); // delete $.removeCookie('name');

First you should understand what the cookie is and how it’s set. A cookie is a string that is stored on the user’s computer to allow data to persist throughout the user’s session. Cookies are often set by HTTP response headers, but they can also be set directly in the browser using JavaScript. To read the entire cookie string you can access document.cookie.

document.cookie
What you’ll likely see is a long string of semi-colon delineated key/value pairs.
ps=31;_ssd3=P0-1415818163-1436218393727;favorite_animal=goat;_gaa=23.00334.....

First you should understand what the cookie is and how it’s set. A cookie is a string that is stored on the user’s computer to allow data to persist throughout the user’s session. Cookies are often set by HTTP response headers, but they can also be set directly in the browser using JavaScript. To read the entire cookie string you can access document.cookie.

document.cookie
What you’ll likely see is a long string of semi-colon delineated key/value pairs.
ps=31;_ssd3=P0-1415818163-1436218393727;favorite_animal=goat;_gaa=23.00334.....

document.cookie

You can manually set a cookie by setting document.cookie equal to the desired cookie using this format:

document.cookie = "name=tyler;expires=Thu, 03 Sep 2015 05:33:44 GMT";
This can be a little cumbersome, so the function below should make things easier.
function setCookie(name, value, exdays) { var d, expires; exdays = exdays || 1; d = new Date(); d.setTime(d.getTime() + (exdays2460601000)); expires = "expires=" + d.toUTCString(); document.cookie = name + "=" + value + "; " + expires; }
To set a cookie that lasts for one year, you could use:
setCookie('name', 'Batman', 365);

You can manually set a cookie by setting document.cookie equal to the desired cookie using this format:

document.cookie = "name=tyler;expires=Thu, 03 Sep 2015 05:33:44 GMT";
This can be a little cumbersome, so the function below should make things easier.
function setCookie(name, value, exdays) { var d, expires; exdays = exdays || 1; d = new Date(); d.setTime(d.getTime() + (exdays2460601000)); expires = "expires=" + d.toUTCString(); document.cookie = name + "=" + value + "; " + expires; }
To set a cookie that lasts for one year, you could use:
setCookie('name', 'Batman', 365);

To read a cookie you can simply access document.cookie.

console.log(document.cookie);
If you’re searching for a specific value you can use the following function.
function getCookie(name) { var cookie, c; cookies = document.cookie.split(';'); for (var i=0; i < cookies.length; i++) { c = cookies[i].split('='); if (c[0] == name) { return c[1]; } } return ""; }
This function uses JavaScript’s string split method to split the cookie string by semi-colons. Then it loops through the result array of strings and splits them again by “=” producing the cookie key/value pair. Then it simply tests the cookie key (c[0]) against the name of the cookie you are trying to read. If it matches it returns the value (c[1]).

To read a cookie you can simply access document.cookie.

console.log(document.cookie);
If you’re searching for a specific value you can use the following function.
function getCookie(name) { var cookie, c; cookies = document.cookie.split(';'); for (var i=0; i < cookies.length; i++) { c = cookies[i].split('='); if (c[0] == name) { return c[1]; } } return ""; }
This function uses JavaScript’s string split method to split the cookie string by semi-colons. Then it loops through the result array of strings and splits them again by “=” producing the cookie key/value pair. Then it simply tests the cookie key (c[0]) against the name of the cookie you are trying to read. If it matches it returns the value (c[1]).
Mentioned here
How to Split a String into an Array in JavaScript

To delete a cookie, you simply need to expire it. So deleting a cookie is basically setting the cookie with an expiration in the past. Using our setCookie function:

setCookie('name', '', -1);

To delete a cookie, you simply need to expire it. So deleting a cookie is basically setting the cookie with an expiration in the past. Using our setCookie function:

setCookie('name', '', -1);

If you’re using jQuery, you might as well use this cookie plugin. It allows easy management of cookies.

// read $.cookie('name'); // => "Batman" // set $.cookie('name', 'Iron Man'); // delete $.removeCookie('name');

If you’re using jQuery, you might as well use this cookie plugin. It allows easy management of cookies.

// read $.cookie('name'); // => "Batman" // set $.cookie('name', 'Iron Man'); // delete $.removeCookie('name');
Calling all writers!

We’re hiring. Write for Howchoo

Jeremy's profile pictureJeremy
Joined in 2015
Programmer, brogrammer, whoagrammer.
Jeremy's profile picture
Share this guide!
RedditEmailText
Related to this guide:
How to Pretty Print JSON in Chrome Developer ConsoleHow to Pretty Print JSON in Chrome Developer Console
In these interests: codejavascriptwebdev
Remove Elements From an Array in JavaScriptRemove Elements From an Array in JavaScript
When working with arrays in JavaScript, we often need to remove elements.
Tyler's profile picture TylerView
In these interests: codejavascript
Enumerable Properties in JavaScriptEnumerable Properties in JavaScript
Enumerable properties are properties whose internal enumerable flag set to true.
Tyler's profile picture TylerView
In these interests: codejavascript
How to Pretty Print JSON in Chrome Developer ConsoleHow to Pretty Print JSON in Chrome Developer Console
In these interests: codejavascriptwebdev
Zach's profile pictureViewcodejavascriptwebdev
Remove Elements From an Array in JavaScriptRemove Elements From an Array in JavaScript
When working with arrays in JavaScript, we often need to remove elements.
Tyler's profile picture TylerView
In these interests: codejavascript
Tyler's profile pictureViewcodejavascript
Enumerable Properties in JavaScriptEnumerable Properties in JavaScript
Enumerable properties are properties whose internal enumerable flag set to true.
Tyler's profile picture TylerView
In these interests: codejavascript
Tyler's profile pictureViewcodejavascript
People also read:
This guide demonstrates multiple ways to iterate over a JavaScript object’s properties and values.
There are two very similar statements in JavaScript: for…in and for…of. And while they can be easily confused, they’re actually quite different.
My journey trying to find the one loop operator to rule them all
As a JavaScript developer, you’ll often need to construct URLs and query string parameters. One sensible way to construct query string parameters is to use a one layer object with key value pairs.
Writing tests is an important part of software development process. Unit tests form a core part of testing process where each functional block is tested as an independent unit.
Making a deep copy of an object in JavaScript is fairly challenging. Fortunately, there are a few ways to accomplish this without much code.
Learn how to split a string into an array.
This guide will teach you how to concatenate, or join, all elements of an array into a single string.
Learn how to merge two arrays together in JavaScript.
Tabbed browsing has become the standard so modern browsers have provided a way for developers to determine if a tab has focus. This uses the HTML 5 Page Visibility API.
This guide demonstrates multiple ways to iterate over a JavaScript object’s properties and values.
There are two very similar statements in JavaScript: for…in and for…of. And while they can be easily confused, they’re actually quite different.
My journey trying to find the one loop operator to rule them all
As a JavaScript developer, you’ll often need to construct URLs and query string parameters. One sensible way to construct query string parameters is to use a one layer object with key value pairs.
Writing tests is an important part of software development process. Unit tests form a core part of testing process where each functional block is tested as an independent unit.
Learn Multiple Ways to Iterate Over JavaScript Object Properties and Values
The Difference Between “for…in” and “for…of” in JavaScript
JavaScript for loops
How to Turn an Object into Query String Parameters in JavaScript
Unit Testing in JavaScript – Mocha, Chai and Sinon – a Beginner’s Guide
Making a deep copy of an object in JavaScript is fairly challenging. Fortunately, there are a few ways to accomplish this without much code.
Learn how to split a string into an array.
This guide will teach you how to concatenate, or join, all elements of an array into a single string.
Learn how to merge two arrays together in JavaScript.
Tabbed browsing has become the standard so modern browsers have provided a way for developers to determine if a tab has focus. This uses the HTML 5 Page Visibility API.
How to Copy an Object in JavaScript
How to Split a String into an Array in JavaScript
How to Join All Elements of an Array in JavaScript
How to Merge Two Arrays in JavaScript
Determine if a Tab has Focus in JavaScript
Posted in these interests:
javascriptjavascript
javascript
PRIMARY
Array(16).join(“wat” – 1) + ” Batman!”;
codecode
Code is poetry — one line at a time.
javascriptjavascript
javascript
PRIMARY
Array(16).join(“wat” – 1) + ” Batman!”;
PRIMARY
Explore
codecode
Code is poetry — one line at a time.
Explore
Discuss this guide:
We’re hiring!
Are you a passionate writer? We want to hear from you!
We’re hiring!
Are you a passionate writer? We want to hear from you!
View openings

Want to support Howchoo? When you buy a tool or material through one of our Amazon links, we earn a small commission as an Amazon Associate.

Donate

Leave a Reply

Your email address will not be published. Required fields are marked *