0
votes

Le stockage ne se fait même pas virer

L'onstorage ne se déclenche même pas dans Firefox ni dans Chrome lors de la définition d'une variable de stockage local, même avec une valeur différente de celle d'avant.

window.addEventListener('storage', () => {
    console.log('onStorage raised');
});

//window.onstorage = e => {
//    console.log('onStorage raised');
//}

localStorage.setItem('date', new Date());

https://jsfiddle.net/Brobic/fot9vzm6/1/

javascript

1 commentaires

Avez-vous écrit le code qui modifie localStorage ? Si c'est le cas, vous pouvez toujours créer et déclencher votre propre événement.

3 Réponses :

1
votes

Comme écrit ici: https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event L' événement est déclenché si le stockage est modifié par UN AUTRE document, pas par soi-même.

3 commentaires

J'ai lu cela mais je ne comprends pas ce que cela signifie? Quel autre document? Comme un iframe contenant un autre domaine de site? Ne serait-ce pas une violation de script intersite? Ou peut-être une page autre que celle où l'événement est déclaré? C'est très déroutant.

En fait, je pense que ce n'est pas une violation intersite - c'est le deuxième onglet sur le même site. En utilisant cet événement, vous avez la possibilité, par exemple, d'afficher le même numéro pour les `` articles du panier '' dans plusieurs pages de la boutique en ligne

Je viens de tester cela en ouvrant le même fichier deux fois en utilisant localhost chacun dans un onglet différent. Une fois que j'ai ouvert le deuxième fichier, l'événement s'est déclenché.

2
votes

Si vous êtes le seul à définir localStorage , vous pouvez créer votre propre événement. Bien que cela puisse être un peu exagéré, vous pouvez toujours utiliser cette méthode pour appeler également une fonction au lieu de créer un événement. J'ai utilisé l'ancien style d'événement car il est plus compatible.

function setStorage(k, v) {
  const event = document.createEvent('Event');
  event.initEvent('storageChanged', true, true);
  localStorage.setItem(k, v);
  document.dispatchEvent(event);
}

window.addEventListener('storageChanged', (e) => {
  console.log('storageChanged raised');
});

setStorage("date", new Date())

console.log(localStorage.getItem('date'))

0 commentaires

0
votes

Comme @Quercus l'a souligné, l'événement ne se déclenchera pas sur sa propre page, c'est pourquoi j'utilise localDataStorage , un wrapper pratique pour l'API HTML5 localStorage qui déclenche commodément les événements de modification sur la même page / onglet / fenêtre dans laquelle l'événement de stockage s'est produit . (Avertissement: je suis l'auteur de l'interface.)

Une fois que vous avez installé localDataStorage , cet exemple de code vous permettra de voir ces événements de modification:

function nowICanSeeLocalStorageChangeEvents( e ) {
    console.log(
        "subscriber: "    + e.currentTarget.nodeName + "\n" +
        "timestamp: "     + e.detail.timestamp + " (" + new Date( e.detail.timestamp ) + ")" + "\n" +
        "prefix: "        + e.detail.prefix    + "\n" +
        "message: "       + e.detail.message   + "\n" +
        "method: "        + e.detail.method    + "\n" +
        "key: "           + e.detail.key       + "\n" +
        "old value: "     + e.detail.oldval    + "\n" +
        "new value: "     + e.detail.newval    + "\n" +
        "old data type: " + e.detail.oldtype   + "\n" +
        "new data type: " + e.detail.newtype
    );
};
document.addEventListener(
    "localDataStorage"
    , nowICanSeeLocalStorageChangeEvents
    , false
);

0 commentaires