jQuery Girl
  1. jQuery Girl
  3. Comment lier un événement à sessionStorage?
Intereting Posts
Obtenir l’avant dernier élément déplacer l’image d’arrière-plan en fonction de la largeur du navigateur Pourquoi les valeurs d’atsortingbut de casse jQuery auto low? Rails: Rendu de partiels via Ajax WordPress: Suppression d’une balise META pour une page spécifique Arrêtez de recharger un fichier flash lorsque vous utilisez les méthodes d’affichage et de masquage jQuery Tipsy: une solution de remplacement simple? affichage des codes de réponse par code d’erreur Laravel Ajax Input :: all () retourne vide quand l’envoie via FormData Où définir une fonction de réussite jQuery $ .ajax () si vous ne souhaitez pas définir dans l’appel à $ .ajax ()? Est-il possible d’actualiser une image après le téléchargement d’un fichier ajax dans jQuery? déclenchement de jquery sur des éléments dynamics Comment jouer à un GIF sur un clic (comme 9GaG.com) avec wordpress? Passer du contenu dynamic à bootstrap modal 3.2 JQuery Sync Bouton radio sélectionné entre 2 groupes de boutons radio

Comment lier un événement à sessionStorage?

Je peux réussir à lier un événement pour une modification de localStorage (en utilisant jquery): 

$(window).bind('storage', function(e) { alert('change'); }); localStorage.setItem('someItem', 'someValue');

Si j’utilise sessionStorage, l’événement NE sera PAS déclenché: 

  $(window).bind('storage', function(e) { alert('change'); }); sessionStorage.setItem('someItem', 'someValue');

Pourquoi est-ce?

Je pense que c’est comme ça que ça se passe. De la spécification (emphase ajoutée):

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

Je pense que cela signifie que l’événement sera déclenché dans tout autre document partageant l’object de stockage de la session, mais pas le document qui a provoqué le déclenchement de l’événement.

Mettre à jour

Voici une autre question très similaire qui semble être en accord avec ce que j’ai mentionné ci-dessus (la réponse cite le même paragraphe de la spécification).

Le sessionStorage est isolé pour chaque onglet, ils ne peuvent donc pas communiquer. Les événements de sessionStorage sont déclenchés qu’entre des frameworks sessionStorage sur le même onglet.

MODIFIER:

J’ai fait l’exemple suivant:

http://codepen.io/surdu/pen/QGZGLO?editors=1010

La page d’exemple contient deux boutons qui déclenchent une modification du stockage local et de la session.

Il intègre également un iframe dans un autre codepen qui écoute les modifications d’événements de stockage:

http://codepen.io/surdu/pen/GNYNrW?editors=1010 (vous devriez garder cela ouvert dans un onglet différent.)

Vous remarquerez que lorsque vous appuyez sur le bouton “Écrire en local”, l’événement est capturé dans l’iframe et l’onglet ouvert, mais lorsque vous appuyez sur la “session en écriture”, seul l’iframe incorporé capture l’événement.

Cette question semble susciter un certain nombre de points de vue, je vais donc simplement poster ceci à titre d’information supplémentaire.

Si vous souhaitez répondre exclusivement aux mises à jour de l’object sessionStorage, vous pouvez simplement ignorer les événements provoqués par localStorage: 

 $(window).on('storage',function(e){ if(e.originalEvent.storageArea===sessionStorage){ alert('change'); } // else, event is caused by an update to localStorage, ignore it });

Je déteste jQuery, alors je vais aussi poster une version native: 

 window.addEventListener('storage',function(e){ if(e.storageArea===sessionStorage){ alert('change'); } // else, event is caused by an update to localStorage, ignore it });