Wir können mit JavaScript Cookie einsetzen, auslesen, aktualisieren und auch wieder entfernen. Das Besondere daran ist, das wir uns auf der Klient Seite befinden und so sehr viel mehr als serverseitig vom User erhalten. Also in verständlicher Sprache wir sind näher am User dran, weil wir in seinem Browser sind mit unserem Code.
JavaScript Cookie setzen und füllen
Wir erstellen uns unsere Funktionen, um so schneller auf alles zu zugreifen. Ich werde später auch daraus eine Klasse machen und nicht nur als Funktionen belassen. Also fangen wir an und erstellen setMyCookie()
mit der wir unsere Cookies erstellen werden und diese ist ganz simple. Hier fehlen natürlich jegliche Prüfungen damit Fehler vermieden werden, doch dazu in der Klasse weiter unten mehr.
0
/**
1
* Set the cookie
2
* @param { } args
3
*/
4
function setMyCookie(args) {
5
document.cookie = args.name + args.expires + args.path + args.domain;
6
}
In diese Funktion können wir jetzt unsere Argumente reinschicken und unser Cookie wird gesetzt. Dies tun wir mit einem Objekt was wir in der Funktion als args benennen und unterteilen sie in ihre Einzelteile. Und hier das folgende args Objekt:
0
// Date objekt holen
1
var d = new Date(), args = {};
2
// Ablaufzeit festlegen, hier 365 tage
3
d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000));
4
// Dann unser objekt für 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
// Unsere Funktion aufrufen
16
setMyCookie(args);
Wenn unser Cookie erfolgreich gesetzt wurde, können wir es auslesen, jedoch bevor wir es auslesen bauen wir uns noch eine prüf Funktion um so sicher zu gehen das dieser Cookie auch existiert.
Checken ob Cookie vorhanden
Wir prüfen ganz Simple, ob unser Cookie Name vorhanden ist, ist dies der Fall oder auch nicht, so können wir dem Entsprechen handeln. Also erstellen wir uns eine neue Funktion hasMyCookie()
0
/**
1
* Check if the javascript cookie exists
2
* @param {string} name
3
* @returns {string}
4
*/
5
function hasMyCookie(name) {
6
return document.cookie.search(name) !== -1 ? true : false;
7
}
Du kannst auch prüfen ob der Nutzer Cookies erlaubt. navigator.cookieEnabled
So nun können wir vorher prüfen ob Cookies vorhanden sind oder auch zwischendurch.
Datenschutz Grundverordnung
Beachte auch die DSGVO und erkundige Dich was für Dich notwendig ist, es kommt darauf an was Du für eine Webseite betreibst.
Cookie auslesen und auswerten
Um den Cookie richtig auszulesen, decodieren wie den Cookie und entfernen unseren Cookie Namen. Danach wandeln wir unseren String (das Objekt welches wir oben mit JSON.stringify()
zum String gewandelt haben) wieder um in ein Objekt mit JSON.parse()
So können wir auf alles wieder in unserem Cookie zugreifen, weil so wie wir es erstellt haben, haben wir es auch ausgelesen. Und wir erstellen uns erneut eine neue Funktion die wie folgt aussieht getMyCookie()
0
/**
1
* Get the javascript cookie
2
* @param {string} name
3
* @returns {string}
4
*/
5
function getMyCookie(name) {
6
return JSON.parse(decodeURIComponent(document.cookie).replace(name + "=", ''));
7
}
So sieht der Inhalt dann in JavaScript aus und Du kannst es auch noch weiter ausbauen.
{totalvisits: 2,
sites:
index:
hits: 1
url: "Sites/NetBeans/PHP-Cookie/index.php"
second:
hits: 1
url: "Sites/NetBeans/PHP-Cookie/second.php"
}
Und so würde dieser Cookie beim auslesen mit PHP aussehen.
// 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)
}
}
}
Inhalt aktualisieren und speichern
Wir können natürlich auch den Inhalt unseres Cookies aktualisieren und in JavaScript auch sehr gut. Wir können unser Objekt beliebig füllen und so alles festhalten, jedoch ist die Größe begrenzt. Führe bei einem reload die Update-Funktion aus oder auch mit eine event Listener bei einem Klick. Erweitere die Funktion so das Du benötigte Informationen sammeln kannst, dies hier ist nur ein Beispiel.
0
/**
1
* Update the cookie
2
* @param {string} name
3
* @returns {string}
4
*/
5
function updateMyCookie(name) {
6
7
var 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 befindet sich unser der gesäuberte url basename also z.B. index.php wird zu index und second.php wird zu second, aber auch first-slide.php wird zu firstslide
12
13
// Existiert dieses Objekt so updaten wir es, andernfalls erstellen wir es neu und setzen unsere Daten
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
// Wir setzen unsere Zeit und überschreiben die aktuelle
24
date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
25
26
var args = {
27
name: name + "=" + JSON.stringify({
28
totalvisits: totalcount,
29
sites: visitorsOBJ.sites
30
}) + ';',
31
expires: "expires=" + date.toUTCString() + ';', // Nun setzen wir es im richtigen 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 {basename}
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
}
Cookie wieder entfernen
Wir wollen irgendwann vielleicht auch unseren Cookie Entfernen oder auch nur ein bestimmten Cookie. Deshalb benötigen wir noch eine letzte Funktion, die unseren Cookie entfernt. Beachte hier, wenn Du Dein Cookie mit einem path erstellt hast brauchst Du diesen auch beim Entfernen des Cookies. Wir entfernen unseren Cookie in dem wir einfach die Zeit in die Vergangenheit setzen.
0
/**
1
* Delete the cookie
2
*
3
* @param {string} name
4
* @returns {string}
5
*/
6
function deleteMyCookie(name) {
7
document.cookie = name + '=; Expires=Thu, 01 Jan 1970 00:00:01 GMT; Path=/; domain=localhost;';
8
}
Tipp
Sieh Dir auch diesen Artikel PHP - Cookies setzen und nutzen an, hier wurde mit PHP der Cookie so erstellen das man diesen mit dem Code oben auslesen kann und umgekehrt genau so. Also nicht nur den selben Cookie auslesen sondern auch den Inhalt genau so anpassen.
Alles als Klasse
Und hier noch der komplette Code in Klassen Style, so das man es auslagern und nutzen kann, was man auch tun sollte. Sogar in einer eigenen Datei so das man ohne die Datei zu öffnen erkennt um welche Klasse es sich handelt. Damit die Klasse auch übersichtlich nicht nur als Datei sondern auch Inhaltlich so bleibt sollte sie nicht länger als 200 Zeilen sein, also die Klasse selbst. Wenn es doch darüber hinaus gehen sollte kann man je nach Funktion entscheiden ob eine andere Klasse noch in frage kommt und dann diese auslagern wie hier z.B. setMyIndex in MyHttp (hier würde ich jedoch nur location path name holen und die Funktion get loc oder so nennen). Den Inhalt ebenfalls, weil es replace Funktionen sind die man auch auslagern könnte und mit array replace versehen so wie die Klasse MyRegEx. Also man könnte noch jede menge machen :)
0
/**
1
* Description of Cookie
2
*
3
* @author Samet Tarim
4
* @copyright (c) 2018, Samet Tarim
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 {type} args
15
* @returns {undefined}
16
*/
17
setMyCookie: function (args) {
18
if (MyCookie.enabledMyCookie() && args.name && args.expires && args.path && args.domain) {
19
document.cookie = args.name + args.expires + args.path + args.domain;
20
}
21
},
22
/**
23
* Check if the cookie exists
24
*
25
* @param {string} name
26
* @returns {string}
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
* @returns {navigator.cookieEnabled|Boolean}
36
*/
37
enabledMyCookie: function () {
38
return navigator.cookieEnabled;
39
},
40
/**
41
* Get the cookie
42
*
43
* @param {string} name
44
* @returns {string}
45
*/
46
getMyCookie: function (name) {
47
if (name) {
48
return JSON.parse(decodeURIComponent(document.cookie).replace(name + "=", ''));
49
}
50
},
51
/**
52
* Update the cookie
53
*
54
* @param {string} name
55
* @returns {string}
56
*/
57
updateMyCookie: function (name) {
58
59
if (!name) { return };
60
61
var date = new Date(),
62
visitorsOBJ = MyCookie.getMyCookie(name),
63
located = location.pathname.substr(1),
64
totalcount = (visitorsOBJ.totalvisits + 1),
65
idx = MyCookie.setMyIndex();
66
67
// Update cookie values
68
if (typeof visitorsOBJ.sites[
69
visitorsOBJ.sites[idx].url = located;
70
visitorsOBJ.sites[idx].hits = visitorsOBJ.sites[loc].hits + 1;
71
} else {
72
visitorsOBJ.sites[idx] = {};
73
visitorsOBJ.sites[idx].url = located;
74
visitorsOBJ.sites[idx].hits = 1;
75
}
76
77
// Set our time and overwrite the dateTime
78
date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
79
80
var args = {
81
name: name + "=" + JSON.stringify({
82
totalvisits: totalcount,
83
sites: visitorsOBJ.sites
84
}) + ';',
85
expires: "expires=" + date.toUTCString() + ';',
86
path: 'path=/;',
87
domain: 'domain=localhost;',
88
};
89
90
MyCookie.setMyCookie(args);
91
},
92
/**
93
* Update the cookie
94
*
95
* @param {string} name
96
* @returns {string}
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
// Löschen des 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 kannst Du es anwenden aber werde nicht zum Anwender sondern zum Programmierer in dem Du verstehst was Du machst und auch was die Funktionen im detail machen.
0
<!DOCTYPE html>
1
<html>
2
<head>
3
4
<title>Cookies</title>
5
<link href="css/style.css" rel="stylesheet">
6
<!-- HIER IST UNSER SCRIPT EINGEBUNDEN -->
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>
Dann kannst Du alles nach Deinen Bedürfnissen erweitern, wie z.B. alle Dateiendungen zu cutten ;)
Anzeige