cookie

[db1]

Hello,
ich versuche ein Farbthema in cookies zu speichern und möchte das wenn
die Seite neu geladen wird diese cookie die zuletzt verwendete färbe ausliest:
hier mein code:

function setCookie(name, value, days) {
let expires = "";
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + (value || "") + expires ;
}


function getCookie(name) {
let nameEQ = name + "=";
let ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca;
while (c.charAt(0) == ' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;

}




aktuelle_farbe = getCookie("color");


spätere Abfrage im code ...


if (aktuelle_farbe == "blue") {

setCookie("color", "brown", 7);

console.log(getCookie("color")); // Gibt "MaxMustermann" aus


};

if (aktuelle_farbe == "brown" || aktuelle_farbe == "" ) {

setCookie("color", "blue", 7);
console.log(getCookie("color"));


};

funktioniert auch wunderbar.
doch bei neu laden der Seite ist das cookie nicht vorhanden - wo liegt mein Fehler ?

DANKE
LG

 

[KonradN]

Code bitte immer in Code-Tags posten. Dazu bitte am einfachsten das Icon </> links oberhalb des Eingabebereiches verwenden. Dann wird der Code nicht nur formatiert sondern spezielle Dinge (wie bei dir das [i] wird nicht als Start der kursiven Schrift ausgewertet.

Dann setzt du keinen path. Wenn Du keinen path setzt kann es sein, dass beim reload der Path nicht 100% stimmt und dann wäre das Cookie weg.

Das könnte dann z.B. so aussehen (Code kommt von ChatGPT, ich war jetzt zu faul, das selbst zu schreiben und auszuprobieren)

function setCookie(name, value, days, options = {}) {
  const {
    path = "/",
    sameSite = "Lax",   // für normale Websites meist korrekt
    secure = false,     // bei HTTPS am besten true; bei SameSite=None MUSS true sein
    domain              // optional: z.B. ".example.com"
  } = options;

  let expires = "";
  if (typeof days === "number") {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }

  let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value ?? "")}${expires}; path=${path}; SameSite=${sameSite}`;

  if (domain) cookie += `; domain=${domain}`;
  if (secure) cookie += `; Secure`;

  document.cookie = cookie;
}

function getCookie(name) {
  const nameEQ = encodeURIComponent(name) + "=";
  const parts = document.cookie.split(";");

  for (let i = 0; i < parts.length; i++) {
    let c = parts[i].trim();           // <-- wichtig
    if (c.indexOf(nameEQ) === 0) {
      return decodeURIComponent(c.substring(nameEQ.length));
    }
  }
  return null;
}

Das mit den Options wird ggf. wichtig bei iFrames/CrossSite Aufrufen oder so - da könnte dann ein Aufruf so aussehen:
setCookie("test", "123", 30, { sameSite: "None", secure: true, path: "/" });

Probier mal aus, ob das evtl. Dein Problem löst. Ich selbst muss dazu sagen, dass ich kein Javascript Experte bin - ich bin eigentlich inerster Linie im Backend unterwegs... Daher mag mein Verständnis auch durchaus falsch sein.

 

[Oneixee5]

Cookies werden im HTTP-Header zum Server übertragen, mit allen Security-Bedingungen usw.. So wie ich das verstehe ist das nicht nötig. Möglicherweise wäre https://developer.mozilla.org/de/docs/Web/API/Window/localStorage besser geeignet als ein Cookie.

const STORAGE_KEY = "ui.accentColor";
const DEFAULT_COLOR = "#1e88e5";

function saveColor(hex) {
  localStorage.setItem(STORAGE_KEY, hex);
}

function loadColor() {
  const value = localStorage.getItem(STORAGE_KEY);
  return value && value.trim() ? value : DEFAULT_COLOR;
}

function applyColor(hex) {
  document.documentElement.style.setProperty("--accent-color", hex);
}

// Beim Start anwenden
applyColor(loadColor());

// über Input ändern (z. B. <input id="accent" type="color" />)
document.getElementById("accent")?.addEventListener("input", (e) => {
  const hex = e.target.value;
  saveColor(hex);
  applyColor(hex);
});

 

[grrr]

So wie ich das verstehe ist das nicht nötig.

Ja, und weshalb das berechnete Farbschema bzw. den Gradient überhaupt zwischenspeichern? Das kann alles rein clientseitig in JS geschehen.