How can I create and read a value from a cookie in JavaScript?
-
15Quirks mode has a good guide to JavaScript and cookies.– QuentinCommented Jan 28, 2011 at 7:00
-
2FWIW, js-cookie provides a very good API for handling it.– Fagner BrackCommented Jun 13, 2015 at 2:23
-
3Don't forget that the Web Storage API, could be a good alternative to cookies in some situations.– MattBiancoCommented Aug 3, 2017 at 9:03
23 Answers
Here are functions you can use for creating and retrieving cookies.
function createCookie(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
else {
expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
-
26This doesn't work if your cookie value contains anything that doesn't encode/decode well. The one at w3schools seems to work beautifly Commented May 20, 2013 at 2:07
-
14This simple wrapper from Mozilla has explicit unicode support mentioned as well Commented May 13, 2014 at 11:40
-
4
-
1This will not work on IE8 or 9 if the cookie does not have a value, because IE does not add the equal sign (=) after the cookie name. What we do is to check if indexOf("=")==-1, and if so use the entire cookie as the cookie name.– MohochCommented Nov 26, 2014 at 9:46
-
@jahu And I would say it is also in the public domain: developer.mozilla.org/en-US/docs/MDN/…– ChronialCommented Jan 18, 2015 at 20:46
Minimalistic and full featured ES6 approach:
const setCookie = (name, value, days = 7, path = '/') => {
const expires = new Date(Date.now() + days * 864e5).toUTCString()
document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=' + path
}
const getCookie = (name) => {
return document.cookie.split('; ').reduce((r, v) => {
const parts = v.split('=')
return parts[0] === name ? decodeURIComponent(parts[1]) : r
}, '')
}
const deleteCookie = (name, path) => {
setCookie(name, '', -1, path)
}
-
4Sometimes cookie value itself may contain
=
sign. In that case functiongetCookie
will produce unexpected result. To avoid that consider using following arrow function body inside reduceconst [n, ...val] = v.split('='); return n === name ? decodeURIComponent(val.join('=')) : r
Commented Mar 7, 2018 at 16:29 -
Would be nice to have an option to leave the expiry date unset though. This would allow the cookie to be automatically deleted upon browser exit.– xjiCommented Oct 23, 2018 at 14:55
-
stackoverflow.com/a/48706852/87520 allows for all characters, and allows all options and their defaults.– SamGoodyCommented Nov 30, 2018 at 13:43
-
4
864e5 = 86400000 = 1000*60*60*24
represents the number of milliseconds in a 24 hour day.– kantuniCommented Dec 2, 2018 at 20:41 -
Pls, be aware that the above
getCooki
withreduce
won't work properly for multiple cookies with the same name (possible for different paths, e.g./
and/faq
). Chrome always provides cookies for the current path at the beginning of thedocument.cookie
string. This reducer overwritesr
value and returns the last found cookie value (so the value for/
path instead of the current path value). Reduce also has poor performance (less important in this case), I made benchmarks here: measurethat.net/Benchmarks/Show/16012/2/… Commented Nov 25, 2021 at 20:16
or plain Javascript:
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : ("; expires="+exdate.toUTCString()));
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0; i<ARRcookies.length; i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
-
1I'm marking this up primarily because you mentioned JQuery Cookies. I would recommend that. The code is very small and if you're using JQuery already, it is just the correct thing to use.– w0rpCommented Mar 23, 2014 at 13:44
ES7, using a regex for get(). Based on MDN
const Cookie = {
get: name => {
let c = document.cookie.match(`(?:(?:^|.*; *)${name} *= *([^;]*).*$)|^.*$`)[1]
if (c) return decodeURIComponent(c)
},
set: (name, value, opts = {}) => {
/*If options contains days then we're configuring max-age*/
if (opts.days) {
opts['max-age'] = opts.days * 60 * 60 * 24;
/*Deleting days from options to pass remaining opts to cookie settings*/
delete opts.days
}
/*Configuring options to cookie standard by reducing each property*/
opts = Object.entries(opts).reduce(
(accumulatedStr, [k, v]) => `${accumulatedStr}; ${k}=${v}`, ''
)
/*Finally, creating the key*/
document.cookie = name + '=' + encodeURIComponent(value) + opts
},
delete: (name, opts) => Cookie.set(name, '', {'max-age': -1, ...opts})
// path & domain must match cookie being deleted
}
Cookie.set('user', 'Jim', {path: '/', days: 10})
// Set the path to top level (instead of page) and expiration to 10 days (instead of session)
Usage - Cookie.get(name, value [, options]):
options supports all standard cookie options and adds "days":
- path: '/' - any absolute path. Default: current document location,
- domain: 'sub.example.com' - may not start with dot. Default: current host without subdomain.
- secure: true - Only serve cookie over https. Default: false.
- days: 2 - days till cookie expires. Default: End of session.
Alternative ways of setting expiration:- expires: 'Sun, 18 Feb 2018 16:23:42 GMT' - date of expiry as a GMT string.
Current date can be gotten with: new Date(Date.now()).toUTCString() - 'max-age': 30 - same as days, but in seconds instead of days.
- expires: 'Sun, 18 Feb 2018 16:23:42 GMT' - date of expiry as a GMT string.
Other answers use "expires" instead of "max-age" to support older IE versions. This method requires ES7, so IE7 is out anyways (this is not a big deal).
Note: Funny characters such as "=" and "{:}" are supported as cookie values, and the regex handles leading and trailing whitespace (from other libs).
If you would like to store objects, either encode them before and after with and JSON.stringify and JSON.parse, edit the above, or add another method. Eg:
Cookie.getJSON = name => JSON.parse(Cookie.get(name))
Cookie.setJSON = (name, value, opts) => Cookie.set(name, JSON.stringify(value), opts);
-
6Would the downvoters kindly explain what's wrong with my method?– SamGoodyCommented Nov 18, 2018 at 9:50
-
41. Shorter, and IMO easier to maintain. 2. More complete (is the only answer to accept secure, any order of arguments, max-age). 3. More standard defaults (path etc defaults to the standard, unlike most answers here). 4. Best practice (according to MDN, the regex is the most reliable way to extract the values). 5. Futureprook (if more options are added to cookies, they will be maintained). 6. One object pollutes the code less than a bunch of functions. 7. Get, set and delete and easy to add more methods. 8. ES7 (yummy buzzwords).– SamGoodyCommented Nov 29, 2018 at 21:40
-
1@Ric. 1. I don't get an error in VSCode. This has been valid since ES7, so not sure why you should have an issue. 2. When you are trying to retrieve the value, you don't know it yet. Do Cookie.get('name') w/o the value, and it will will return the value if it has been set. Hope that helps :)– SamGoodyCommented Jan 10, 2022 at 21:40
-
2There's no need to minify variables on Stack Overflow like
c
k
v
,str
,opts
, just use real variable names. Commented Sep 27, 2022 at 13:02 -
2@SamGoody In code (which isn’t mathematics), most people would do age + yearBorn = currentYear. Unlike mathematics, code sticks around and is read more than it is written and the overhead of having to find out that ‘c’ is cookie is unnecessary on those reading your code. This is why single character variable names are not considered good practice. You’re welcome to argue about this but I don’t think Stack Overflow is the place to do this. Commented Sep 29, 2022 at 11:33
Mozilla created a simple framework for reading and writing cookies with full unicode support along with examples of how to use it.
Once included on the page, you can set a cookie:
docCookies.setItem(name, value);
read a cookie:
docCookies.getItem(name);
or delete a cookie:
docCookies.removeItem(name);
For example:
// sets a cookie called 'myCookie' with value 'Chocolate Chip'
docCookies.setItem('myCookie', 'Chocolate Chip');
// reads the value of a cookie called 'myCookie' and assigns to variable
var myCookie = docCookies.getItem('myCookie');
// removes the cookie called 'myCookie'
docCookies.removeItem('myCookie');
See more examples and details on Mozilla's document.cookie page.
A version of this simple js file is on github.
-
7Please note that the cookie library provided on MDN is released under the GPL, not LGPL.– ohmuCommented Apr 6, 2015 at 17:11
-
What javascript file do I need to import? Couldn't find it :( Commented Aug 19, 2015 at 19:29
-
See the section under "Library" on this page: developer.mozilla.org/en-US/docs/Web/API/document/… - you can save it to a file and include it or paste it into an existing js file where you'd like to use it. Commented Aug 21, 2015 at 6:24
-
So no standalone javascript file? So it's a code snippet - not an actual library. Commented Aug 21, 2015 at 6:48
-
Great input! The "library" is a single .js file with ~80 lines; it's this file (on GitHub): github.com/madmurphy/cookies.js/blob/master/cookies.js– PhilippCommented Jul 11, 2019 at 11:00
For those who need save objects like {foo: 'bar'}, I share my edited version of @KevinBurke's answer. I've added JSON.stringify and JSON.parse, that's all.
cookie = {
set: function (name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else
var expires = "";
document.cookie = name + "=" + JSON.stringify(value) + expires + "; path=/";
},
get : function(name){
var nameEQ = name + "=",
ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0)
return JSON.parse(c.substring(nameEQ.length,c.length));
}
return null;
}
}
So, now you can do things like this:
cookie.set('cookie_key', {foo: 'bar'}, 30);
cookie.get('cookie_key'); // {foo: 'bar'}
cookie.set('cookie_key', 'baz', 30);
cookie.get('cookie_key'); // 'baz'
I've used accepted answer of this thread many times already. It's great piece of code: Simple and usable. But I usually use babel and ES6 and modules, so if you are like me, here is code to copy for faster developing with ES6
Accepted answer rewritten as module with ES6:
export const createCookie = ({name, value, days}) => {
let expires;
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = '; expires=' + date.toUTCString();
} else {
expires = '';
}
document.cookie = name + '=' + value + expires + '; path=/';
};
export const getCookie = ({name}) => {
if (document.cookie.length > 0) {
let c_start = document.cookie.indexOf(name + '=');
if (c_start !== -1) {
c_start = c_start + name.length + 1;
let c_end = document.cookie.indexOf(';', c_start);
if (c_end === -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return '';
};
And after this you can simply import it as any module (path of course may vary):
import {createCookie, getCookie} from './../helpers/Cookie';
-
1FYI:
toGMTString()
is deprecated: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…. UsetoUTCString()
instead. Commented Jun 30, 2021 at 16:09
Performance benchmark
Comparison of ES6 versions of some popular getCookie
functions (with my improvements):
https://www.measurethat.net/Benchmarks/Show/16012/5/getcookie-for-vs-forof-vs-indexof-vs-find-vs-reduce
TL;DR: for...of
version seams to be fastest for real-life cookies data :)
Important:
document.cookie
can provide duplicated cookie names if there are cookies with the same name forpath=/
and current page path (eg.path=/faq
). But the cookie for the current path will always be the first in the string, so be aware of this when using thereduce()
version from the other answer provided here (it returns the last found cookie instead of the first one).Fixed
reduce()
version is further in my answer.
For..of version:
Fastest for the real-life benchmark data set (10 cookies with long values). But performance results are almost the same as with vanilla for
loop and with Array.find()
, so use which you like :)
function getCookieForOf(name) {
const nameEQ = name + '=';
for (const cookie of document.cookie.split('; ')) {
if (cookie.indexOf(nameEQ) === 0) {
const value = cookie.substring(nameEQ.length);
return decodeURIComponent(value); // returns first found cookie
}
}
return null;
}
IndexOf version
Incredibly fast in the artificial test set of 1000 cookies with short values (because it doesn't create an array with 1000 records). To be honest, I consider there could be a bug in the test code that makes this version so crazy fast (if you would find some, pls let me know). Anyway, it's rather not probable to have 1000 cookies in the real App ;)
It's slow for the real-world test data set with 10 long cookies.
function getCookieIndexOf(name) {
const nameEQ = name + '=';
const cookies = document.cookie;
const cookieStart = cookies.indexOf(nameEQ);
if (cookieStart !== -1) {
const cookieValueStart = cookieStart + nameEQ.length;
const cookieEnd = cookies.indexOf(';', cookieValueStart);
const value = cookies.substring(
cookieValueStart,
cookieEnd !== -1 ? cookieEnd : undefined
);
return decodeURIComponent(value); // returns first found cookie
}
return null;
}
Array.find() version
function getCookieFind(name) {
const nameEQ = name + '=';
const foundCookie = document.cookie
.split('; ')
.find(c => c.indexOf(nameEQ) === 0); // returns first found cookie
if (foundCookie) {
return decodeURIComponent(foundCookie.substring(nameEQ.length));
}
return null;
}
Vanilla, old-school, for-loop version ;)
function getCookieFor(name) {
const nameEQ = name + "=";
const ca = cookies.split('; ');
for(let i=0; i < ca.length; i++) {
const c = ca[i];
if (c.indexOf(nameEQ) === 0) {
const value = c.substring(nameEQ.length);
return decodeURIComponent(value); // returns first found cookie
}
}
return null;
}
// ES5 version:
function getCookieFor(name) {
var nameEQ = name + "=";
var ca = cookies.split('; ');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
if (c.indexOf(nameEQ) === 0) {
var value = c.substring(nameEQ.length);
return decodeURIComponent(value); // returns first found cookie
}
}
return null;
}
Array.reduce() version
My fixed version of this answer from @artnikpro - returns the first found cookie, so works better with duplicated cookie names for the current path (e.g. path=/faq
) and path=/
.
This version is the slowest one in all performance tests, so IMHO should be avoided.
function getCookieReduce(name) {
return document.cookie.split('; ').reduce((r, v) => {
const [n, ...val] = v.split('='); // cookie value can contain "="
if(r) return r; // returns first found cookie
return n === name ? decodeURIComponent(val.join('=')) : r; // returns last found cookie (overwrites)
}, '');
}
You can run benchmarks by yourself here: https://www.measurethat.net/Benchmarks/Show/16012/5/getcookie-for-vs-forof-vs-indexof-vs-find-vs-reduce
setCookie() TypeScript function
Here is also my version of the function to set a cookie with encodeURIComponent
, TypeScript
, and SameSite
option (which will be required by Firefox soon):
function setCookie(
name: string,
value: string = '',
days: number | false = false, // session length if not provided
path: string = '/', // provide an empty string '' to set for current path (managed by a browser)
sameSite: 'none' | 'lax' | 'strict' = 'lax', // required by Firefox
isSecure?: boolean
) {
let expires = '';
if (days) {
const date = new Date(
Date.now() + days * 24 * 60 * 60 * 1000
).toUTCString();
expires = '; expires=' + date;
}
const secure = isSecure || sameSite === 'none' ? `; Secure` : '';
const encodedValue = encodeURIComponent(value);
document.cookie = `${name}=${encodedValue}${expires}; path=${path}; SameSite=${sameSite}${secure}`;
}
Google Chrome Cookie Storage API
Thanks to @oncode answer it's worth mentioning that the Google Chrome team has proposed some standardization (finally! It's really ridiculous that we still don't have any commonly accepted API for cookies) with asynchronous Cookie Storage API (available in Google Chrome starting from version 87): https://wicg.github.io/cookie-store/
Unfortunately, it's still unofficial and isn't even under W3C consideration nor ES proposal: github.com/tc39/proposals
Such a shame we still don't have any standard API for cookies...
Fortunately, we have cookie-store
polyfill for other browsers as npm package (gitHub), which is only 1.7kB Gzipped ;)
-
1Your answer needs more upvotes :) Extra kudos for suggesting benchmarks... Commented Apr 18 at 16:19
Here's a code to Get, Set and Delete Cookie in JavaScript.
function getCookie(name) {
name = 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);
}
if (cookie.indexOf(name) == 0) {
return cookie.substring(name.length,cookie.length);
}
}
return "";
}
function setCookie(name, value, expirydays) {
var d = new Date();
d.setTime(d.getTime() + (expirydays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = name + "=" + value + "; " + expires;
}
function deleteCookie(name){
setCookie(name,"",-1);
}
Source: http://mycodingtricks.com/snippets/javascript/javascript-cookies/
-
1
-
Aye, it requires some searching on the Wayback Machine... Commented Apr 18 at 16:20
I've used js-cookie to success.
<script src="/path/to/js.cookie.js"></script>
<script>
Cookies.set('foo', 'bar');
Cookies.get('foo');
</script>
-
Definitely recommended. As of 2024, this project continues to be audited and validated all the time; new releases continue to be done regularly. And it's still less than 800 bytes (aye, bytes) gzipped. Commented Apr 18 at 16:29
Very short ES6 functions using template literals. Be aware that you need to encode/decode the values by yourself but it'll work out of the box for simplier purposes like storing version numbers.
const getCookie = (cookieName) => {
return (document.cookie.match(`(^|;) *${cookieName}=([^;]*)`)||[])[2]
}
const setCookie = (cookieName, value, days=360, path='/') => {
let expires = (new Date(Date.now()+ days*86400*1000)).toUTCString();
document.cookie = `${cookieName}=${value};expires=${expires};path=${path};`
}
const deleteCookie = (cookieName) => {
document.cookie = `${cookieName}=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/;`;
}
I use this object. Values are encoded, so it's necessary to consider it when reading or writing from server side.
cookie = (function() {
/**
* Sets a cookie value. seconds parameter is optional
*/
var set = function(name, value, seconds) {
var expires = seconds ? '; expires=' + new Date(new Date().getTime() + seconds * 1000).toGMTString() : '';
document.cookie = name + '=' + encodeURIComponent(value) + expires + '; path=/';
};
var map = function() {
var map = {};
var kvs = document.cookie.split('; ');
for (var i = 0; i < kvs.length; i++) {
var kv = kvs[i].split('=');
map[kv[0]] = decodeURIComponent(kv[1]);
}
return map;
};
var get = function(name) {
return map()[name];
};
var remove = function(name) {
set(name, '', -1);
};
return {
set: set,
get: get,
remove: remove,
map: map
};
})();
I use the following functions, which I have written by taking the best I have found from various sources and weeded out some bugs or discrepancies.
The function setCookie does not have advanced options, just the simple stuff, but the code is easy to understand, which is always a plus:
function setCookie(name, value, daysToLive = 3650) { // 10 years default
let cookie = name + "=" + encodeURIComponent(value);
if (typeof daysToLive === "number") {
cookie += "; max-age=" + (daysToLive * 24 * 60 * 60);
document.cookie = cookie + ";path=/";
}
}
function getCookie(name) {
let cookieArr = document.cookie.split(";");
for (let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");
if (name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1].trim());
}
}
return undefined;
}
function deleteCookie(name) {
setCookie(name, '', -1);
}
The chrome team has proposed a new way of managing cookies asynchronous with the Cookie Storage API (available in Google Chrome starting from version 87): https://wicg.github.io/cookie-store/
Use it already today with a polyfill for the other browsers: https://github.com/mkay581/cookie-store
// load polyfill
import 'cookie-store';
// set a cookie
await cookieStore.set('name', 'value');
// get a cookie
const savedValue = await cookieStore.get('name');
-
1Thx a lot for sharing this! Unfortunately, it's still unofficial and isn't even under W3C consideration nor ES proposal: github.com/tc39/proposals Such a shame we still don't have any standard API for cookies... it's ridiculous :P Fortunately
cookie-store
is only 1.7kB Gzipped ;) bundlephobia.com/package/[email protected] Commented Nov 25, 2021 at 21:10
For reading simple querystrings, this one-liner might work for you in recent versions of JavaScript:
let cookies = Object.fromEntries(document.cookie.split(';').map(i=>i.trim().split('=')));
And now you have a JavaScript Object with keys and values.
For creating, you can try this one:
let cookieObject = {foo: 'bar', ping: "pong"}
Object.entries(cookieObject).map((e)=>`${e[0]}=${e[1]}`).join(';')
-
1
-
-
Huh! One-liner FTW! Tough to read and work around in my head, but, sure, it seems to do the work! Well done :) Commented Apr 18 at 16:32
You can use my cookie ES module for get/set/remove cookie.
Usage:
In your head tag, include the following code:
<script src="https://raw.githack.com/anhr/commonNodeJS/master/cookieNodeJS/build/cookie.js"></script>
or
<script src="https://raw.githack.com/anhr/commonNodeJS/master/cookieNodeJS/build/cookie.min.js"></script>
Now you can use window.cookie for store user information in web pages.
cookie.isEnabled()
Is the cookie enabled in your web browser?
returns {boolean} true if cookie enabled.
Example
if ( cookie.isEnabled() )
console.log('cookie is enabled on your browser');
else
console.error('cookie is disabled on your browser');
cookie.set( name, value )
Set a cookie.
name: cookie name.
value: cookie value.
Example
cookie.set('age', 25);
cookie.get( name[, defaultValue] );
get a cookie.
name: cookie name.
defaultValue: cookie default value. Default is undefined.
returns cookie value or defaultValue if cookie was not found
Example
var age = cookie.get('age', 25);
cookie.remove( name );
Remove cookie.
name: cookie name.
Example
cookie.remove( 'age' );
Through a interface similar to sessionStorage
and localStorage
:
const cookieStorage = {
getItem: (key) {
const cookies = document.cookie.split(';')
.map(cookie => cookie.split('='))
.reduce(
(accumulation, [key, value]) => ({...accumulation, [key.trim()]: value}),
{}
)
return cookies[key]
},
setItem: (key, value) {
document.cookie = `${key}=${value}`
},
}
Its usage cookieStorage.setItem('', '')
and cookieStorage.getItem('')
.
-
That's very clever of you. I like the rather well-standardised localStorage/sessionStorage facilities, so this looks good to me (I think). I wonder, couldn't this object be derived from the generic
Storage
object as well? Commented Apr 18 at 16:35
Simple way to read cookies in ES6.
function getCookies() {
var cookies = {};
for (let cookie of document.cookie.split('; ')) {
let [name, value] = cookie.split("=");
cookies[name] = decodeURIComponent(value);
}
console.dir(cookies);
}
-
1cookies can contain '=' in a value string. This code won't work. Commented Nov 25, 2021 at 21:15
-
1The question is also about creating cookies, not just reading them Commented Apr 6, 2023 at 14:30
Object-Oriented Approach
The manipulation of cookies is a task ideally suited to an object-oriented approach, not a functional one, so I wrote a Cookie class that has static and instance methods that can be used to interact with cookies as objects rather than as strings. I've put this up on GitHub as well, and will add any updates to it there.
https://github.com/kloddant/cookie
class Cookie {
static list = [];
static index = {};
constructor (kwargs={}) {
this.name = kwargs["name"];
this.value = kwargs["value"] ?? null;
console.assert(kwargs.hasOwnProperty('name'));
console.assert(kwargs.hasOwnProperty('value'));
let days;
if (kwargs.hasOwnProperty("path")) {
this.path = kwargs["path"] ?? "/";
}
if (kwargs.hasOwnProperty("domain")) {
this.domain = kwargs["domain"] ?? location.hostname;
}
if (kwargs.hasOwnProperty("expires")) {
this.expires = kwargs["expires"] ?? null;
console.assert(this.expires instanceof Date || this.expires == null);
}
if (kwargs.hasOwnProperty("days")) {
let days = kwargs["days"] ?? null;
console.assert(Number.isInteger(days) || days == null);
}
if (days && !this.expires) {
this.expires = new Date();
this.expires.setTime(this.expires.getTime() + (days*24*60*60*1000));
}
}
save () {
let cookie_dict = {};
cookie_dict[this.name] = this.value || "";
cookie_dict["Path"] = this.path || "/";
if (this.domain) {
cookie_dict["Domain"] = this.domain || location.hostname;
}
if (this.expires) {
cookie_dict["Expires"] = this.expires.toUTCString();
}
let cookie_string = "";
for (const [key, value] of Object.entries(cookie_dict)) {
cookie_string += key + "=" + value + "; ";
}
console.log(cookie_string.trim());
document.cookie = cookie_string.trim();
return this;
}
delete (kwargs={}) {
if (kwargs.hasOwnProperty("path")) {
this.path = kwargs["path"];
}
if (kwargs.hasOwnProperty("domain")) {
this.domain = kwargs["domain"];
}
this.value = "";
this.expires = new Date();
this.expires.setTime(this.expires.getTime() - (24*60*60*1000));
this.save();
}
static create (kwargs={}) {
let cookie = new this(kwargs);
cookie.save();
return cookie;
}
static fetch() {
let parts = document.cookie.split(";").map((part) => part.trim().split("="));
this.list = [];
this.index = {};
for (let part of parts) {
let cookie = new this({"name": part[0], "value": part[1]});
this.list.push(cookie);
this.index[cookie.name] = cookie;
}
}
static all() {
this.fetch();
return this.list;
}
static get(name) {
this.fetch();
return this.index[name] ?? null;
}
}
Usage
Creating a Cookie
Example
var cookie = Cookie.create({"name": "", "value": ""});
Getting an Existing Cookie
Example
var cookie = Cookie.get("example");
Saving/Updating a Cookie
Example
cookie.value = 1;
cookie.save();
Deleting a Cookie
Example
cookie.delete();
I have written simple cookieUtils, it has three functions for creating the cookie, reading the cookie and deleting the cookie.
var CookieUtils = {
createCookie: function (name, value, expireTime) {
expireTime = !!expireTime ? expireTime : (15 * 60 * 1000); // Default 15 min
var date = new Date();
date.setTime(date.getTime() + expireTime);
var expires = "; expires=" + date.toGMTString();
document.cookie = name + "=" + value + expires + "; path=/";
},
getCookie: function (name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) {
return parts.pop().split(";").shift();
}
},
deleteCookie: function(name) {
document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
};
Here is the example from w3chools that was mentioned.
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
A simple read
var getCookie = function (name) {
var valueStart = document.cookie.indexOf(name + "=") + name.length + 1;
var valueEnd = document.cookie.indexOf(";", valueStart);
return document.cookie.slice(valueStart, valueEnd)
}
A cheeky and simple way of reading a cookie could be something like:
let username, id;
eval(document.cookie);
console.log(username + ", " + id); // John Doe, 123
This could be used if you know your cookie contains something like: username="John Doe"; id=123;
. Note that a string would need quotes in the cookie. Not the recommended way probably, but works for testing/learning.