Gestion des cookies modernes avec l’API du magasin de cookies

Découvrez comment l’API Cookie Store Modernise la gestion des cookies avec les opérations asynchrones et la gestion des événements pour un développement Web efficace et sans erreur.

Le navigateur API du magasin de cookies représente une approche moderne pour gérer les cookies dans les applications Web. La façon dont nous l’avons toujours fait est d’utiliser document.cookie qui est sujet aux erreurs car vous devez travailler avec des paires de clés / valeur dans une chaîne. En plus d’être sujet aux erreurs, c’est une opération de blocage synchrone, qui ne correspond pas aux modèles modernes par lesquels nous essayons de déplacer certaines opérations pour être asynchrones et hors du fil principal. Cela dépend du document objet, donc il ne peut pas être utilisé dans un Employé de service contexte.

Ce tutoriel explore comment cette nouvelle API simplifie la gestion des cookies. Nous allons construire un site avec des thèmes légers et sombres, permettant aux utilisateurs de changer de thèmes et de stocker leurs préférences dans un cookie pour de futures visites.

Comprendre la gestion des cookies: alors et maintenant

Traditionnellement, les développeurs Web ont utilisé le document.cookie API pour travailler avec des cookies. Voici comment nous gérons des cookies:

document.cookie = "theme=dark; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";


function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}


const theme = getCookie('theme');
if (theme === 'dark') {
    document.body.classList.add('dark-theme');
}

À première vue, en fixant des cookies avec document.cookie On dirait que nous écrasons toute la valeur des cookies. La manipulation de la chaîne nécessaire pour lire une valeur de cookie est lourde et une petite erreur peut briser votre application. Gérer plusieurs cookies signifie analyser la chaîne de cookies encore et encore, et en raison de sa nature synchrone, cela pourrait ralentir votre application.

L’API Cookie Store aborde en revanche ces problèmes en fournissant une interface basée sur des promesses avec ces avantages:

• Méthodes plus propres et plus intuitives pour lire et écrire des cookies
• Gestion des événements intégrés pour les changements de cookies
• Opérations asynchrones qui ne bloquent pas le fil principal
• Méthodes pour gérer efficacement plusieurs cookies

Construire un commutateur à thème avec API de magasin de biscuits

Voyons comment construire un commutateur de thème qui montre comment utiliser le API du magasin de cookies. Notre exemple permettra aux utilisateurs de basculer entre les thèmes clairs et sombres, leur préférence persistant à travers les recharges de page et les séances de navigateur.

Tout d’abord, regardons la structure HTML:

<div class="container">
    <h1>CookieStore API Demo</h1>
    <button class="theme-switcher" onclick="toggleTheme()">Toggle Theme</button>
    <div class="cookie-info">
        <h3>Current Cookie State:</h3>
        <div id="cookieDisplay"></div>
    </div>
</div>

Maintenant, implémentons la fonctionnalité de base à l’aide du CookieStore interface:

if ('cookieStore' in window) {
    
    cookieStore.addEventListener('change', event => {
        console.log('Cookie change detected:', event);
        updateCookieDisplay();
    });
}


async function initializeTheme() {
    try {
        const themeCookie = await cookieStore.get('theme');
        if (themeCookie && themeCookie.value === 'dark') {
            document.body.classList.add('dark-theme');
        }
        updateCookieDisplay();
    } catch (error) {
        console.error('Error reading theme cookie:', error);
    }
}


async function toggleTheme() {
    const isDarkTheme = document.body.classList.toggle('dark-theme');
    
    try {
        await cookieStore.set({
            name: 'theme',
            value: isDarkTheme ? 'dark' : 'light',
            expires: Date.now() + 30 * 24 * 60 * 60 * 1000, 
            sameSite: 'strict'
        });
    } catch (error) {
        console.error('Error saving theme preference:', error);
    }
}

Décomposons les caractéristiques clés:

1. Modèle asynchrone / attente: L’API utilise les promesses, ce qui le rend compatible avec la syntaxe asynchrone / attendre. Il en résulte un code plus propre par rapport aux approches basées sur un rappel.

2. Détection du changement de cookie: Le CookieStore Interface fournit un écouteur d’événements pour écouter les changements de cookies. Cela nous permet de réagir aux modifications des cookies en temps réel.

3. Lecture et écriture simplifiées: Remarquez comment nous pouvons obtenir directement et définir des cookies en utilisant des méthodes comme set(), get() et getAll() sans manipulation de cordes.

Voici le code complet Pour que vous essayiez vous-même et une démo de la façon dont cela fonctionne.

Prise en charge du navigateur et secours

Depuis 2024, l’API Cookstore n’est pas universellement soutenue dans tous les navigateurs. Chrome et Edge le soutiennent, tandis que Firefox et Safari travaillent toujours sur la mise en œuvre.

Image de MDN

Pour les applications de production, vous devez mettre en œuvre un mécanisme de secours. Vous devez vérifier si cookieStore est disponible dans le Window objet. Voici un exemple:

class CookieManager {
    constructor() {
        this.useModernAPI = 'cookieStore' in window;
    }

    async setCookie(name, value, options = {}) {
        if (this.useModernAPI) {
            return cookieStore.set({ name, value, ...options });
        }
        
        
        let cookie = `${name}=${value}`;
        if (options.expires) {
            cookie += `; expires=${new Date(options.expires).toUTCString()}`;
        }
        if (options.path) {
            cookie += `; path=${options.path}`;
        }
        document.cookie = cookie;
    }

    async getCookie(name) {
        if (this.useModernAPI) {
            return cookieStore.get(name);
        }
        
        
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) {
            return { 
                name, 
                value: parts.pop().split(';').shift() 
            };
        }
        return null;
    }
}

Cet exemple définit une classe avec deux méthodes getCookie() et setCookie(). Ces méthodes utilisent le CookieStore méthodes si disponibles; Sinon, ils retombent à document.cookie.

Conclure

Le API du magasin de cookies Améliore considérablement la manipulation des biscuits. Son interface basée sur les promesses, sa détection de changement intégrée et ses méthodes plus propres en font un outil puissant pour le développement Web moderne. Alors que le support de navigateur augmente, la mise en œuvre avec des replies appropriées vous permet d’écrire du code durable tout en étant prêt à la future. Vérifiez le Documentation MDN pour plus d’informations sur l’API du magasin de cookies.