EN
JavaScript - get / set / remove cookies (custom solution)
7 points
In this short article we would like to show how to get, set and remove cookies in JavaScript in web browser usiong custom light cookies manager implementation.
By default cookies usage with built-in web browser API is not intuitive. In practice we are able to wite own one cookies manager what is presented in this article.
The example presented in the article was created to store cookies in safe way - escaping dangerous characters with encodeURIComponent() function, that can be changed to some other if it is needed.
The below manager provides API to:
- check if cookies are enabled
- get string, boolean, number and date value cookies
- set string, boolean, number and date value cookies,
- remove cookie,
- calculate expiration time from: seconds, minutes, hours and days.
Usage example:
xxxxxxxxxx1
var expiration = Cookies.calculateExpirationDays(30); // cookies will expire after 30 days2
3
Cookies.setStringCookie('user', 'john', expiration);4
Cookies.setBooleanCookie('admin', true , expiration);5
Cookies.setNumberCookie('age', 25, expiration);6
Cookies.setDateCookie('created', new Date(), expiration);7
8
var user = Cookies.getStringCookie('user');9
var admin = Cookies.getBooleanCookie('admin');10
var age = Cookies.getNumberCookie('age');11
var created = Cookies.getDateCookie('created');Full API:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Where:
expiration,domainandpathare optional,calculatExpiration...functions return time when cookie will expire.
xxxxxxxxxx1
window.Cookies = new function() {2
var self = this;3
4
var cachedCookies = { };5
var browserCookie = document.cookie;6
7
if (browserCookie.length > 0) {8
var parts = browserCookie.split('; ');9
for (var i = 0; i < parts.length; ++i) {10
var entry = parts[i];11
var index = entry.indexOf('=');12
var name = decodeURIComponent(entry.substr(0, index));13
if (name in cachedCookies) {14
continue;15
}16
var value = decodeURIComponent(entry.substr(index + 1));17
setCachedCookie(name, value);18
}19
}20
21
function setCachedCookie(name, value) {22
cachedCookies[name] = value;23
}24
function removeCachedCookie(name) {25
delete cachedCookies[name];26
}27
function setBrowserCookie(name, value, expiration, domain, path) {28
var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);29
if (expiration) {30
cookie += ';expires=' + expiration.toUTCString();31
}32
if (domain) {33
cookie += ';domain=' + encodeURI(domain);34
}35
if (path) {36
cookie += ';path=' + encodeURI(path);37
}38
document.cookie = cookie;39
}40
function removeBrowserCookie(name) {41
var expiration = this.calculateDays(-100);42
document.cookie = encodeURIComponent(name) + ';expires=' + expiration.toUTCString();43
}44
45
// Cookies API46
47
self.checkCookiesEnabled = function() {48
return navigator.cookieEnabled;49
};50
51
self.removeCookieValue = function(name) {52
removeCachedCookie(name);53
removeBrowserCookie(name);54
};55
56
self.getStringCookie = function(name) {57
return cachedCookies[name] || null;58
};59
self.setStringCookie = function(name, value, expiration, domain, path) {60
setCachedCookie(name, value);61
setBrowserCookie(name, value, expiration, domain, path);62
};63
64
self.getBooleanCookie = function(name) {65
var string = self.getStringCookie(name);66
if (string == null) {67
return null;68
}69
return string == 'true' || string == '1';70
};71
self.setBooleanCookie = function(name, value, expiration, domain, path) {72
var string = value.toString();73
self.setStringCookie(name, string, expiration, domain, path);74
};75
76
self.getNumberCookie = function(name) {77
var string = this.getStringCookie(name);78
if (string == null) {79
return null;80
}81
return parseFloat(string);82
};83
self.setNumberCookie = function(name, value, expiration, domain, path) {84
var string = value.toString();85
self.setStringCookie(name, string, expiration, domain, path);86
};87
88
self.getDateCookie = function(name) {89
var number = self.getNumberCookie(name);90
if (number == null) {91
return null;92
}93
return new Date(number);94
};95
self.setDateCookie = function(name, value, expiration, domain, path) {96
var number = value.getTime();97
self.setNumberCookie(name, number, expiration, domain, path);98
};99
100
// Cookies Utils101
102
self.calculateExpirationSeconds = function(value) {103
var now = Date.now();104
return new Date(now + 1000 * value);105
};106
self.calculateExpirationMinutes = function(value) {107
var now = Date.now();108
return new Date(now + 60000 * value); // 60 * 1000 = 60000109
};110
self.calculateExpirationHours = function(value) {111
var now = Date.now();112
return new Date(now + 3600000 * value); // 60 * 60 * 1000 = 3600000113
};114
self.calculateExpirationDays = function(value) {115
var now = Date.now();116
return new Date(now + 86400000 * value); // 24 * 60 * 60 * 1000 = 86400000117
};118
};119
120
121
// Usage example:122
123
console.log('Cookies are ' + (Cookies.checkCookiesEnabled() ? 'enabled' : 'disabled'));124
125
if (Cookies.checkCookiesEnabled()) {126
var expiration = Cookies.calculateExpirationSeconds(5); // cookies stored only 5s127
// Cookies.calculateExpirationMinutes(minutes); // in minutes128
// Cookies.calculateExpirationHours(hours); // in hours129
// Cookies.calculateExpirationDays(days); // in days130
131
Cookies.setStringCookie('user', 'john', expiration);132
Cookies.setBooleanCookie('admin', true , expiration);133
Cookies.setNumberCookie('age', 25, expiration);134
Cookies.setDateCookie('created', new Date(), expiration);135
136
var user = Cookies.getStringCookie('user');137
var admin = Cookies.getBooleanCookie('admin');138
var age = Cookies.getNumberCookie('age');139
var created = Cookies.getDateCookie('created');140
141
if (created) {142
created = created.toISOString();143
}144
145
console.log('user: ' + user + '\n' +146
'admin: ' + admin + '\n' +147
'age: ' + age + '\n' +148
'created: ' + created );149
};
