Was ist die Cookie Store API?
Die Cookie Store API stellt Service Workern und
bietet eine asynchrone Alternative zu document.cookie
. Die API macht es möglich,
einfacher:
- Vermeiden Sie Verzögerungen im Hauptthread, indem Sie asynchron auf Cookies zugreifen.
- Vermeiden Sie das Abfragen von Cookies, da Änderungen an Cookies beobachtet werden können.
- Auf Cookies von Service Workern zugreifen.
Aktueller Status
Schritt | Status |
---|---|
1. Erklärende Mitteilung erstellen | Abschließen |
2. Ersten Entwurf der Spezifikation erstellen | Abschließen |
**3. Feedback einholen und Spezifikation iterieren** | **In Bearbeitung** |
4. Ursprungstest | Pausiert |
5. Starten | Nicht gestartet |
Wie verwende ich den asynchronen Cookie-Speicher?
Ursprungstest aktivieren
Wenn Sie die API lokal testen möchten, können Sie sie über die Befehlszeile aktivieren:
chrome --enable-blink-features=CookieStore
Durch Übergabe dieses Flags in der Befehlszeile wird die API global in Chrome für folgende Nutzer aktiviert: in der aktuellen Sitzung.
Alternativ können Sie die #enable-experimental-web-platform-features
aktivieren
Flag in chrome://flags
.
Sie benötigen (wahrscheinlich) keine Cookies,
Bevor wir uns mit der neuen API beschäftigen, möchte ich anmerken, dass Cookies immer noch das Web das schlechteste clientseitige Speicherprimitive der Plattform und sollte trotzdem als als letztes Mittel. Dies ist kein Zufall - Cookies waren die erste clientseitige Speichermechanismus und haben seitdem viel gelernt.
Die Hauptgründe für die Vermeidung von Cookies sind:
Cookies stellen das Speicherschema in Ihre Back-End-API ein. Jede HTTP-Anfrage enthält einen Snapshot der Cookie-JAR-Datei. Dadurch wird es einfach, Back-End-Engineers, um Abhängigkeiten vom aktuellen Cookie-Format einzuführen. Einmal kann Ihr Frontend sein Speicherschema nicht ändern, ohne eine entsprechende Änderung am Backend vornehmen.
Cookies haben ein komplexes Sicherheitsmodell. Moderne Webplattformfunktionen folgen derselben Ursprungsrichtlinie, d. h., Jede Anwendung erhält ihre eigene Sandbox und ist völlig unabhängig von andere Anwendungen, die der Nutzer ausführt. Cookie-Bereiche das Thema Sicherheit wesentlich komplexer machen. würde das die Größe des Artikels verdoppeln.
Cookies verursachen hohe Leistungskosten. Browser müssen einen Snapshot der bei jeder HTTP-Anfrage verwendet werden, daher muss jede Änderung an Cookies zwischen den Speicher- und Netzwerk-Stacks verteilt. Moderne Browser haben stark optimierten Cookie-Speicher-Implementierungen zu implementieren. Cookies sind so effizient wie die anderen Speichermechanismen, die keine Gespräche mit dem Netzwerk-Stack verknüpft.
Aus allen oben genannten Gründen sollten moderne Webanwendungen auf Cookies und stattdessen eine Sitzungs-ID in IndexedDB und die ID explizit zum Header oder Textkörper bestimmter HTTP-Anfragen hinzufügen, mithilfe der fetch API.
Dennoch lesen Sie diesen Artikel immer noch, weil Sie eine gute Gründe für die Verwendung von Cookies...
Cookie auslesen und Verzögerung beheben
Der ehrwürdige
document.cookie
Das API ist eine ziemlich garantierte Quelle für Verzögerungen für Ihre Anwendung. Beispiel:
Wenn Sie den Getter document.cookie
verwenden, muss der Browser die Ausführung
bis die angeforderten Cookie-Informationen vorliegen. Dies kann bis zu
ein Prozess-Hop oder ein Laufwerklesevorgang, wodurch
die Benutzeroberfläche zu Verzögerungen führt.
Eine einfache Lösung für dieses Problem ist ein Wechsel von der document.cookie
Getter zur asynchronen Cookie Store API hinzu.
await cookieStore.get('session_id');
// {
// domain: "example.com",
// expires: 1593745721000,
// name: "session_id",
// path: "/",
// sameSite: "unrestricted",
// secure: true,
// value: "yxlgco2xtqb.ly25tv3tkb8"
// }
Der document.cookie
-Setter kann auf ähnliche Weise ersetzt werden. Wichtige Hinweise
dass die Änderung erst garantiert angewendet wird, nachdem das Promise vom
cookieStore.set
aufgelöst wird.
await cookieStore.set({name: 'opt_out', value: '1'});
// undefined
Beobachten, nicht abfragen
Eine beliebte Anwendung für den Zugriff auf Cookies über JavaScript erkennt, wenn
Der Nutzer meldet sich ab
und aktualisiert die UI. Dies erfolgt derzeit durch Abfragen
document.cookie
, was zu Verzögerungen führt und sich negativ auf den Akku auswirkt
Leben.
Die Cookie Store API bietet eine alternative Methode zur Beobachtung von Cookies. für die keine Abfrage erforderlich ist.
cookieStore.addEventListener('change', event => {
for (const cookie of event.changed) {
if (cookie.name === 'session_id') sessionCookieChanged(cookie.value);
}
for (const cookie of event.deleted) {
if (cookie.name === 'session_id') sessionCookieChanged(null);
}
});
Servicemitarbeiter willkommen heißen
Aufgrund des synchronen Designs wurde die document.cookie
API nicht erstellt,
verfügbar für
Service Worker.
Die Cookie Store API ist asynchron und daher zulässig.
Arbeiter.
Die Interaktion mit den Cookies funktioniert in Dokumentkontexten und in Service Workers.
// Works in documents and service workers.
async function logOut() {
await cookieStore.delete('session_id');
}
Die Beobachtung von Cookie-Änderungen ist bei Service Workern jedoch etwas anders. Aufwachen kann ziemlich teuer sein. Daher müssen wir Änderungen am Cookie, die für den Worker relevant sind.
Im folgenden Beispiel wird eine Anwendung, die IndexedDB verwendet, um Nutzerdaten im Cache zu speichern, überwacht Änderungen am Sitzungscookie und verwirft die im Cache gespeicherten Daten, wenn der Nutzer meldet sich ab.
// Specify the cookie changes we're interested in during the install event.
self.addEventListener('install', event => {
event.waitUntil(cookieStore.subscribeToChanges([{name: 'session_id'}]));
});
// Delete cached data when the user logs out.
self.addEventListener('cookiechange', event => {
for (const cookie of event.deleted) {
if (cookie.name === 'session_id') {
indexedDB.deleteDatabase('user_cache');
break;
}
}
});
Best Practices
Bald verfügbar.
Feedback
Wenn Sie diese API ausprobieren, teilen Sie uns Ihre Meinung mit! Bitte verweisen
Feedback zur API-Form an die
Spezifikations-Repository
und melden Fehler bei der Implementierung
Blink>Storage>CookiesAPI
Blink-Komponente
Wir interessieren uns besonders für Leistungsmessungen und zusätzlich zu den in der Erläuterung genannten Fällen.
Zusätzliche Ressourcen
- Öffentliche Erläuterung
- Spezifikation
- Tracking-Fehler
- chromestatus.com-Eintrag
- WICG-Discourse-Thread
- Blink-Komponente:
Blink>Storage>CookiesAPI