We can use JavaScript to set, read, update and remove cookies. The special thing is that we are on the client side and so much more than server-side of the user received. So in understandable language we're closer to the user because we're in his browser with our code.
Data protection basic regulation
Take note of the GDPR and inquire what is necessary for you, it depends on what you do for a website.
Create and fill a cookie
We create our functions for faster access to everything. I'll turn it into a class later and not just leave it as a function. So let's start and create setMyCookie()
with which we will create our cookies and this is quite simple. Here, of course, any tests are missing so that mistakes are avoided, but more in the class below.
0
/**
1
* Set the cookie
2
*
3
* @param { } args
4
*/
5
function setMyCookie(args) {
6
document.cookie = args.name + args.expires + args.path + args.domain;
7
}
In this function we can now send in our arguments and our cookie will be set. We do this with an object that we call the function as args and divide it into its parts. And here's the following args object:
0
// Get a date object
1
let d = new Date(), args = {};
2
// Set expiry time, here 365 days
3
d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000));
4
// Then our object for setMyCookie
5
args = {
6
name: "Visitor=" + JSON.stringify({
7
totalvisits: 0,
8
sites: {}
9
}) + ';',
10
expires: "expires=" + d.toUTCString() + ';',
11
path: 'path=/;',
12
domain: 'domain=localhost;'
13
};
14
15
// Call our function
16
setMyCookie(args);
If our cookie has been successfully set, we can read it out, but before we read it out, we will build a checking function to make sure that this cookie exists.
Check if Cookie exists
We check quite simple, if our cookie name exists, this is the case or not, so we can act the corresponding. So we create a new function
hasMyCookie()
0
/**
1
* Check if the cookie exists
2
*
3
* @param {string} name
4
*
5
* @returns {bool}
6
*/
7
function hasMyCookie(name) {
8
return document.cookie.search(name) !== -1 ? true : false;
9
}
You can also check if the user allows cookies. So now we can check in advance whether cookies are available or in between.
navigator.cookieEnabled
Read and evaluate the cookie
To read the cookie correctly, decode like the cookie and remove our cookie name. Then we transform our string (the object we mentioned above JSON.stringify()
have converted to a string) again with an object JSON.parse()
So we can access everything in our cookie again, because the way we created it, we also read it out. And again we create a new function that looks like this getMyCookie()
0
/**
1
* Get the cookie
2
*
3
* @param {string} name
4
*
5
* @returns {string}
6
*/
7
function getMyCookie(name) {
8
return JSON.parse(decodeURIComponent(document.cookie).replace(name + "=", ''));
9
}
This is what the content looks like in JavaScript and you can extend it even further.
{totalvisits: 2,
sites:
index:
hits: 1
url: "Sites/NetBeans/PHP-Cookie/index.php"
second:
hits: 1
url: "Sites/NetBeans/PHP-Cookie/second.php"
}
And so this cookie would look like while reading out with PHP.
// In PHP
object(stdClass)#1 (2) {
["totalvisits"]=>
int(2)
["sites"]=>
object(stdClass)#3 (2) {
["second"]=>
object(stdClass)#2 (2) {
["url"] => string(36) "Sites/NetBeans/PHP-Cookie/second.php"
["hits"] => int(1)
}
["index"]=>
object(stdClass)#4 (2) {
["url"] => string(35) "Sites/NetBeans/PHP-Cookie/index.php"
["hits"] => int(1)
}
}
}
Update cookie content
Of course we can also update the content of our cookies and in JavaScript also very well. We can fill our object arbitrarily and hold everything, but the size is limited. Perform the update function on a reload or with an event listener on one click. Expand the feature so you can gather the information you need, this is just one example.
0
/**
1
* Update the cookie
2
*
3
* @param {string} name
4
*/
5
function updateMyCookie(name) {
6
7
let date = new Date(),
8
visitorsOBJ = getMyCookie(name),
9
located = location.pathname.substr(1), // Request uri
10
totalcount = (visitorsOBJ.totalvisits + 1),
11
idx = setMyIndex(); // In loc, ours is the cleaned url basename, e.g. index.php becomes index and second.php becomes second, but first-slide.php also becomes firstslide
12
13
// If this object exists, we will update it, otherwise we will rebuild it and set our data
14
if (typeof visitorsOBJ.sites[
15
visitorsOBJ.sites[idx].url = located;
16
visitorsOBJ.sites[idx].hits = visitorsOBJ.sites[idx].hits + 1;
17
} else {
18
visitorsOBJ.sites[idx] = {}; // Neues Objekt erstellen
19
visitorsOBJ.sites[idx].url = located;
20
visitorsOBJ.sites[idx].hits = 1;
21
}
22
23
// We set our time and override the current one
24
date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
25
26
let args = {
27
name: name + "=" + JSON.stringify({
28
totalvisits: totalcount,
29
sites: visitorsOBJ.sites
30
}) + ';',
31
expires: "expires=" + date.toUTCString() + ';', // Now we put it in the right format
32
path: 'path=/;',
33
domain: 'domain=localhost;',
34
secure: 'secure=false;'
35
};
36
37
setMyCookie(args);
38
}
39
40
/**
41
* Help function
42
*
43
* @returns {string}
44
*/
45
function setMyIndex() {
46
// Request uri
47
var loc = location.pathname.substr(1);
48
// Replace signs
49
loc = loc.replace("-", ");
50
loc = loc.replace(".php", ");
51
loc = loc.replace(/\/$/, ");
52
// Basename
53
loc = loc.split('/').reverse()[0];
54
return loc;
55
}
Remove cookie again
At some point, we may also want to remove our cookie or just a specific cookie. That's why we need one last feature that removes our cookie. Note here, if you have created your cookie with a path, you also need this when removing the cookie. We remove our cookie by simply putting the time into the past.
0
/**
1
* Delete the cookie
2
*
3
* @param {string} name
4
*/
5
function deleteMyCookie(name) {
6
document.cookie = name + '=; Expires=Thu, 01 Jan 1970 00:00:01 GMT; Path=/; domain=localhost;';
7
}
Tip
Look at this article too PHP - Set and use cookies on, here was with PHP the cookie so that you can read this with the code above and vice versa exactly. So not only read the same cookie but also adjust the content exactly.
Everything as a class
And here is the complete code in class style, so that you can outsource and use what you should do. Even in a separate file so that you can open without the file recognizes which class it is. In order to keep the class clear not only as a file but also as a content, it should not be longer than 200 lines, that is the class itself. If it should go beyond that you can decide depending on the function if another class still comes into question and then outsource this as here, for example setMyIndex in MyHttp (here I would only get location path name and call the function get loc or something). The content also because they are replace functions that you could also outsource and with array replace provided as the class MyRegEx. So you could do a lot more :)
0
/**
1
* Description of Cookie
2
*
3
* @author prod3v3loper
4
* @copyright (c) 2023, prod3v3loper
5
* @package MelAbu
6
* @version 0.6 alpha
7
* @since 0.6 alpha
8
* @link https://www.tnado.com/
9
*/
10
var MyCookie = {
11
/**
12
* Set the cookie
13
*
14
* @param { } args
15
*/
16
setMyCookie: function (args) {
17
if (MyCookie.enabledMyCookie() && args.name && args.expires && args.path && args.domain) {
18
document.cookie = args.name + args.expires + args.path + args.domain;
19
}
20
},
21
/**
22
* Check if the cookie exists
23
*
24
* @param {string} name
25
*
26
* @returns {bool}
27
*/
28
hasMyCookie: function (name) {
29
if (name) {
30
return document.cookie.search(name) !== -1 ? true : false;
31
}
32
},
33
/**
34
* Check if cookies enabled
35
*
36
* @returns {bool}
37
*/
38
enabledMyCookie: function () {
39
return navigator.cookieEnabled;
40
},
41
/**
42
* Get the cookie
43
*
44
* @param {string} name
45
*
46
* @returns {string}
47
*/
48
getMyCookie: function (name) {
49
if (name) {
50
return JSON.parse(decodeURIComponent(document.cookie).replace(name + "=", ''));
51
}
52
},
53
/**
54
* Update the cookie
55
*
56
* @param {string} name
57
*/
58
updateMyCookie: function (name) {
59
60
if (!name) { return };
61
62
let date = new Date(),
63
visitorsOBJ = MyCookie.getMyCookie(name),
64
located = location.pathname.substr(1),
65
totalcount = (visitorsOBJ.totalvisits + 1),
66
idx = MyCookie.setMyIndex();
67
68
// Update cookie values
69
if (typeof visitorsOBJ.sites[
70
visitorsOBJ.sites[idx].url = located;
71
visitorsOBJ.sites[idx].hits = visitorsOBJ.sites[loc].hits + 1;
72
} else {
73
visitorsOBJ.sites[idx] = {};
74
visitorsOBJ.sites[idx].url = located;
75
visitorsOBJ.sites[idx].hits = 1;
76
}
77
78
// Set our time and overwrite the dateTime
79
date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
80
81
let args = {
82
name: name + "=" + JSON.stringify({
83
totalvisits: totalcount,
84
sites: visitorsOBJ.sites
85
}) + ';',
86
expires: "expires=" + date.toUTCString() + ';',
87
path: 'path=/;',
88
domain: 'domain=localhost;',
89
};
90
91
MyCookie.setMyCookie(args);
92
},
93
/**
94
* Delete the cookie
95
*
96
* @param {string} name
97
*/
98
deleteMyCookie: function (name) {
99
if (name) {
100
document.cookie = name + '=; Expires=Thu, 01 Jan 1970 00:00:01 GMT; Path=/; domain=localhost;';
101
}
102
},
103
/**
104
* Set the index for cookie
105
*
106
* @returns {string}
107
*/
108
setMyIndex: function () {
109
var loc = location.pathname.substr(1);
110
loc = loc.replace("-", ");
111
loc = loc.replace(".php", ");
112
loc = loc.replace(/\/$/, ");
113
loc = loc.split('/').reverse()[0];
114
return loc;
115
}
116
};
117
118
// Delete the cookies
119
// MyCookie.deleteMyCookie("Visitor");
120
121
if (MyCookie.hasMyCookie('Visitor')) {
122
MyCookie.updateMyCookie('Visitor');
123
} else {
124
var d = new Date(), args = {};
125
d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000));
126
args = {
127
name: "Visitor=" + JSON.stringify({
128
totalvisits: 0,
129
sites: {}
130
}) + ';',
131
expires: "expires=" + d.toUTCString() + ';',
132
path: 'path=/;',
133
domain: 'domain=localhost;',
134
secure: 'secure=false;'
135
};
136
MyCookie.setMyCookie(args);
137
}
So you can apply it but not the user but the programmer in which you understand what you do and what the functions in detail.
0
<!DOCTYPE html>
1
<html>
2
<head>
3
4
<title>Cookies</title>
5
<link href="css/style.css" rel="stylesheet">
6
<!-- HERE IS OUR SCRIPT INTEGRATED -->
7
<script type="text/javascript" src="js/script.js"></script>
8
</head>
9
<body>
10
<div class="wrap">
11
<ul>
12
<li><a href="index.php">Home</a></li>
13
<li><a href="second.php">Second</a></li>
14
</ul>
15
</div>
16
</body>
17
</html>
Then you can expand everything to your needs, such as to cut all file extensions;)
Advertising