Magento 2 & localStorage : ce que votre navigateur sait sur vous (et pourquoi)

Quand votre site Magento 2 tourne avec Varnish correctement configuré, chaque page est livrée par le Full Page Cache (FPC), sans exécution PHP ni base de données. C’est rapide, c’est propre, mais… comment afficher des éléments personnalisés comme :

• le nom du client dans le header,
• les messages de confirmation,
• ou encore le contenu du panier ?

🧠 JavaScript, Knockout et localStorage à la rescousse

Magento a fait le choix d’un système full front basé sur :

• Knockout.js pour lier dynamiquement les données à l’interface,
• le localStorage, via la clé mage-cache-storage, pour stocker les informations sensibles au contexte utilisateur (cart, client, messages…).

🧰 Que contient mage-cache-storage ?

Magento y stocke :

• le contenu du panier,
• les infos client (login, nom…),
• les messages d’alerte (succès, erreurs, etc.),
• toute section déclarée comme « volatile » dans les modules via sections.xml.

🔁 Comment Magento met-il à jour ces données ?

Il effectue automatiquement un appel Ajax à :

/customer/section/load?sections=cart,customer,messages

La logique pour savoir quand mettre à jour une section repose sur les fichiers sections.xml fournis par chaque module.

Exemple :

<action name="checkout/cart/couponPost">
    <section name="cart"/>
</action>

Ici, Magento sait que si l’URL /checkout/cart/couponPost est appelée, la section cart doit être rechargée.

Tous ces mappings sont compilés en fichier JSON injecté dans les pages, ce qui permet à Magento de préparer la liste des sections à suivre.

🛠 Côté JS : Magento_Customer/js/customer-data.js

Ce fichier gère tout :

• écoute des requêtes Ajax avec la fonction onAjaxComplete,
• détection des actions déclenchant un update de section,
• mise à jour du localStorage, avec gestion des data_id pour versionner les données.

La fonction onAjaxComplete :

          var sections,
                redirects;
            if (settings.type.match(/post|put|delete/i)) {
                sections = sectionConfig.getAffectedSections(settings.url);

                if (sections && sections.length) {
                    this.invalidate(sections);
                    redirects = ['redirect', 'backUrl'];

                    if (_.isObject(jsonResponse) && !_.isEmpty(_.pick(jsonResponse, redirects))) { //eslint-disable-line
                        return;
                    }
                    this.reload(sections, true);
                }
            }

📥 Récupérer les données dans votre JS

Besoin d’accéder au contenu du panier ou au nom du client ?
Il faut commencer par importer le module customer-data dans votre fichier JS :

define([
    'Magento_Customer/js/customer-data'
], function (customerData) {
    var cart = customerData.get('cart')(); // Notez les deux parenthèses !

    // Exemple : Afficher le nombre d'articles dans le panier
    console.log(cart.summary_count);
});

💡 customerData.get('cart') retourne un observable Knockout. Il faut donc l’exécuter () pour obtenir les données réelles.

🔄 Écouter les mises à jour

Vous pouvez aussi écouter les changements en temps réel :

var cart = customerData.get('cart');
cart.subscribe(function (cartData) {
    // Callback déclenché à chaque mise à jour de la section "cart"
    console.log('Panier mis à jour', cartData);
});

✅ En résumé

Magento 2 combine intelligemment :

• un frontend en cache ultra-performant,
• et un localStorage piloté par Knockout pour gérer les données personnalisées.

C’est ce qui permet à chaque client de voir son panier, ses messages, sans casser le cache… et sans sacrifier les performances.