Cookie-Banner Testseite & Konfigurator

Cookie-Logo Status-Icons

Der Cookie-Button unten rechts zeigt je nach Consent-Status ein anderes Icon. Der aktuell aktive Status wird hervorgehoben.

Was ist localStorage?

localStorage ist eine Web-API, die es erlaubt, Daten als Schlüssel-Wert-Paare dauerhaft im Browser des Benutzers zu speichern. Im Gegensatz zu Cookies werden die Daten nicht automatisch an den Server gesendet – sie bleiben lokal.

Eigenschaften

ekte müssen via JSON.stringify() gespeichert werden

Eigenschaft	Beschreibung
Speichergrösse	ca. 5–10 MB pro Domain (browserabhängig)
Lebensdauer	Unbegrenzt – bleibt bis manuell gelöscht
Datentypen	Nur Strings – Obj
Zugriff	Nur von derselben Domain (Same-Origin-Policy)
Server-Zugriff	Nein – Daten werden nie automatisch an den Server gesendet

Die vier wichtigsten Methoden

// 1. Wert speichern
localStorage.setItem('schluessel', 'wert');

// 2. Wert lesen
var wert = localStorage.getItem('schluessel');

// 3. Einzelnen Eintrag loeschen
localStorage.removeItem('schluessel');

// 4. Alles loeschen
localStorage.clear();

Objekte speichern (JSON)

Da localStorage nur Strings akzeptiert, müssen Objekte und Arrays vorher konvertiert werden:

// Objekt speichern
var einstellungen = { theme: 'dark', sprache: 'de' };
localStorage.setItem('einstellungen', JSON.stringify(einstellungen));

// Objekt lesen
var gespeichert = JSON.parse(localStorage.getItem('einstellungen'));
console.log(gespeichert.theme); // "dark"

localStorage & Cookie-Consent (DSGVO)

Nach der DSGVO / ePrivacy-Richtlinie gilt localStorage als «Speichertechnologie» – genau wie Cookies. Daten, die nicht technisch notwendig sind, dürfen erst nach ausdrücklicher Zustimmung gespeichert werden.

So prüft dein Plugin den Consent-Status

Das Cookie-Banner stellt eine globale Funktion bereit, die du überall aufrufen kannst:

// Einfache Abfrage: darf ich speichern?
if (window.cookieConsentGranted && window.cookieConsentGranted()) {
    localStorage.setItem('mein_plugin_key', wert);
} else {
    console.log('Kein Consent – localStorage wird nicht verwendet.');
}

Auf Consent-Änderung reagieren (Event)

Falls dein Plugin bereits geladen ist, bevor der Benutzer entscheidet, kannst du auf das Event cookieConsentChanged hören:

document.addEventListener('cookieConsentChanged', function (e) {
    if (e.detail.consent) {
        // Benutzer hat gerade akzeptiert
        localStorage.setItem('mein_plugin_key', wert);
    } else {
        // Benutzer hat abgelehnt
        localStorage.removeItem('mein_plugin_key');
    }
});

Komplettes Integrations-Beispiel

Dieses Muster kombiniert beide Ansätze:

(function () {
    'use strict';

    var PLUGIN_KEY = 'mein_plugin_daten';

    function sicherSpeichern(key, value) {
        if (window.cookieConsentGranted && window.cookieConsentGranted()) {
            localStorage.setItem(key, JSON.stringify(value));
            return true;
        }
        return false;
    }

    function sicherLesen(key) {
        var val = localStorage.getItem(key);
        return val ? JSON.parse(val) : null;
    }

    document.addEventListener('cookieConsentChanged', function (e) {
        if (e.detail.consent) {
            sicherSpeichern(PLUGIN_KEY, { gespeichert: true });
        } else {
            localStorage.removeItem(PLUGIN_KEY);
        }
    });

    if (window.cookieConsentGranted && window.cookieConsentGranted()) {
        var daten = sicherLesen(PLUGIN_KEY);
        console.log('Plugin-Daten:', daten);
    }

})();

Variante B: localStorage global blockieren

Falls du den Plugin-Code nicht ändern kannst, gibt es eine alternative Lösung: Das Cookie-Banner enthält einen localStorage Guard, der Storage.prototype.setItem überschreibt.

Dieser Guard ist auf dieser Testseite bereits aktiv. Er bewirkt:

• setItem(), getItem(), removeItem() und clear() werden still blockiert, wenn kein Consent vorliegt
• Der Consent-Cookie selbst (cookie_consent) und Konfigurator-Einstellungen werden immer durchgelassen
• Sobald Consent erteilt wird, funktioniert localStorage ganz normal

Einbindung in WPCode

Füge diesen Code als zweites WPCode-Snippet ein (nach dem Cookie-Banner, ebenfalls Site Wide Header):

<script>
(function () {
    var ALLOWED = ['cookie_consent'];

    function isAllowed(key) {
        for (var i = 0; i < ALLOWED.length; i++) {
            if (key === ALLOWED[i]) return true;
        }
        return !!(window.cookieConsentGranted && window.cookieConsentGranted());
    }

    var origSet = Storage.prototype.setItem;
    Storage.prototype.setItem = function (key, value) {
        if (isAllowed(key)) return origSet.call(this, key, value);
    };

    var origGet = Storage.prototype.getItem;
    Storage.prototype.getItem = function (key) {
        if (isAllowed(key)) return origGet.call(this, key);
        return null;
    };

    var origRemove = Storage.prototype.removeItem;
    Storage.prototype.removeItem = function (key) {
        if (isAllowed(key)) return origRemove.call(this, key);
    };

    var origClear = Storage.prototype.clear;
    Storage.prototype.clear = function () {
        if (window.cookieConsentGranted && window.cookieConsentGranted()) {
            return origClear.call(this);
        }
    };
})();
</script>

Übersicht: Verfügbare API

API	Rückgabe	Beschreibung
window.cookieConsentGranted()	true / false	Prüft, ob der Benutzer Cookies akzeptiert hat
window.COOKIE_CONSENT_KEY	"cookie_consent"	Name des Consent-Cookies
cookieConsentChanged Event	e.detail.consent	Wird bei jeder Consent-Änderung gefeuert