JavaScript cookie setzen und nutzen

Letzte Aktualisierung:

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.



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.


// JS CODE
     0  /**  1   * Set the cookie  2   * @param {array} 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:


    // JS CODE
       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.



      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()


      // JS CODE
         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.



        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()


        // JS CODE
           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.


          // OUTPUT CODE
          {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.


          // OUTPUT CODE
          // 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)
              }
            }
          }


          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.


          // JS CODE
             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[idx] === 'object') {  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  } 


            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.


            // JS CODE
               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 :)


              // JS CODE
                 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[idx] === 'object') {  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.


                // HTML CODE
                   0  <!DOCTYPE html>  1  <html>  2      <head>  3          <meta charset="UTF-8">  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 ;)