web-dev-qa-db-fra.com

pushState: à quoi sert exactement l'objet état?

J'ai lu une douzaine de fois maintenant que l'objet d'état peut exister de plusieurs paires clé/valeur et qu'il est associé à la nouvelle entrée d'historique. Mais quelqu'un pourrait-il me donner un exemple des avantages de l'objet d'État? Quelle en est l'utilité pratique? Je ne peux pas imaginer pourquoi ne pas simplement taper {}

html5objecthistorystatepushstate
52
campari

Prenons ce petit exemple: exécuter le violon ( vue éditeur ):

Vous avez une page où un utilisateur peut sélectionner une couleur. Chaque fois qu'ils le font, nous générons une nouvelle entrée d'historique:

function doPushState(color) {
    var state = {},
        title = "Page title",
        path  = "/" + color;

    history.pushState(state, title, path);
};

Nous laissons l'objet d'état vide pour l'instant et définissons l'URL sur le nom de la couleur (ne rechargez pas la page - cette URL n'existe pas, vous obtiendrez donc un 404).

Maintenant, cliquez sur un rouge, vert et bleu une fois chacun. Notez que l'URL change. Maintenant, que se passe-t-il si vous cliquez sur le bouton de retour?

Le navigateur remonte en effet dans l'histoire, mais notre page ne le remarque pas - l'URL passe de '/ bleu' à '/ vert', mais notre page reste à 'Vous avez sélectionné bleu'. Notre page n'est plus synchronisée avec l'URL.

C'est ce que le window.onpopstate event et l'objet state sont pour:

  1. nous incluons notre couleur sélectionnée dans notre objet d'état

    function doPushState(color) {
    var state = { selectedColor: color },
        title = "Page title",
        path  = "/" + color;

    history.pushState(state, title, path);
};

  2. Ensuite, nous écoutons l'événement popstate, afin de savoir quand nous devons mettre à jour la couleur sélectionnée, qui (dans jQuery) est la suivante:

    $(window).on('popstate', function(event) {
    var state = event.originalEvent.state;

    if (state) {
        selectColor( state.selectedColor );
    }
});

Essayez l'exemple mis à jour: run fiddle ( éditeur ): notre page se met à jour en conséquence lorsque l'utilisateur revient dans l'historique.

90
janfoeh

Est un cas d'utilisation spécifique et tourné vers l'avenir: la maintenance de la vue utilisateur et de l'état des données dans une application progressive à l'aide d'éléments et de modèles personnalisés qui sont répartis dans la vue au niveau régional

Imaginez une grille de 64 cases comme votre vue, sur un grand écran les cases font 147 ^ 2 pièce

L'URL représente 64/un ID utilisateur abs données utilisateur liées

L'application Web peut ensuite remplir sa grille avec des données d'état spécifiques à l'utilisateur

Dans ce cas d'utilisation, celui que je crois pleinement être l'avenir, l'utilisateur ne voudrait pas partager son état personnel et ses portions de vue remplies de données

En utilisant les états d'historique précédents et leurs 650k de données associées

Une application complète et complexe peut être réassemblée à partir de l'historique et de l'emplacement du navigateur, y compris l'état, en utilisant quelques approches de tri bien connues.

C'est cool

1
Jason Frazzano