web-dev-qa-db-fra.com

Comment se lier à un événement de changement localStorage en utilisant jQuery pour tous les navigateurs?

Comment lier une fonction à l'événement de changement HTML5 localStorage à l'aide de jQuery?

$(function () {

  $(window).bind('storage', function (e) {
    alert('storage changed');
  });

  localStorage.setItem('a', 'test');

});

J'ai essayé ce qui précède mais l'alerte ne s'affiche pas.

Mise à jour: Cela fonctionne dans Firefox 3.6 mais cela ne fonctionne pas dans Chrome 8 ou IE 8 donc la question devrait être plus 'Comment se lier à l'événement de changement localStorage en utilisant jQuery pour tous les navigateurs?'

jqueryhtml5google-chrome
64
David Glenn

Il s'avère que cela fonctionne réellement correctement et j'ai mal interprété la spécification

Lorsque les méthodes setItem (), removeItem () et clear () sont appelées sur un objet Storage x associé à une zone de stockage locale, si les méthodes ont fait quelque chose, alors dans chaque objet Document dont l'objet Storage de l'attribut localStorage de l'objet Window de l'objet Window est associé à la même zone de stockage, autre que x, un événement de stockage doit être déclenché

En d'autres termes, un événement de stockage est déclenché sur chaque fenêtre/onglet sauf pour celui qui a mis à jour l'objet localStorage et a provoqué l'événement .

L'événement n'a donc pas été déclenché car je n'avais qu'une seule fenêtre/onglet ouvert. Si je place le code ci-dessus dans une page et ouvre la page dans deux onglets, je verrais l'événement déclenché dans le deuxième onglet.

Cette réponse au problème contient plus de détails.

85
David Glenn

Voici comment le faire dans JQuery:

 $(window).bind('storage', function (e) {
     console.log(e.originalEvent.key, e.originalEvent.newValue);
 });

Accès à e.key directement ne fonctionne pas. Vous devez utiliser e.originalEvent.key.

Certains navigateurs n'enverront que des notifications de stockage à d'autres onglets, et d'autres non. (Firefox enverra les événements de stockage à son propre onglet, mais avec key réglé sur null, il semble que).

11
Flimm

Une chose à mentionner est que le gestionnaire d'événements est uniquement appelé .setItem si l'élément en fait change. J'arrachais mes cheveux en essayant de faire fonctionner cela jusqu'à ce que je réalise que vous ne pouvez pas continuer à exécuter setItem avec la même valeur.

Je suis sur Chrome Version 54.0.2840.71 m

Voici un test (ouvrez-le dans deux onglets du navigateur).

if (window.addEventListener)
            addEventListener('storage', storage_event, false);
        else if (window.attachEvent)
            attachEvent('onstorage', storage_event, false);
        function storage_event(e) {
            console.log("Time is now "+ e.newValue);
        }

        setInterval(function () {
            var time=new Date().getTime();
            localStorage.setItem("time", time);
            console.log("Setting time to "+time);
        }, 1000)
5
kmoney12

Vous pouvez toujours utiliser un utilitaire comme localDataStorage pour déclencher les événements pour vous, dans la même fenêtre/onglet, chaque fois qu'une valeur de clé change, comme celles apportées par les méthodes set ou remove. Vous pouvez également l'utiliser pour définir/obtenir de manière transparente l'un des "types" suivants: Array, Boolean, Date, Float, Integer, Null, Object ou String.

[DISCLAIMER] Je suis l'auteur de l'utilitaire [/ DISCLAIMER]

Une fois que vous instanciez l'utilitaire, l'extrait de code suivant vous permettra de surveiller les événements (dans Vanilla JS, puisque des exemples jQuery ont déjà été donnés):

function localStorageChangeEvents( e ) {
    console.log(
        "timestamp: "     + e.detail.timestamp + " (" + new Date( e.detail.timestamp ) + ")" + "\n" +
        "key: "           + e.detail.key     + "\n" +
        "old value: "     + e.detail.oldval  + "\n" +
        "new value: "     + e.detail.newval  + "\n"
    );
};
document.addEventListener(
    "localDataStorage"
    , localStorageChangeEvents
    , false
);
2
Mac