È possibile persistere (senza ricaricare) lo stato della pagina AJAX dopo i clic sul pulsante BACK?

StackOverflow https://stackoverflow.com/questions/34227

  •  09-06-2019
  •  | 
  •  

Domanda

Conosco diversi approcci per far funzionare il pulsante Indietro nelle applicazioni AJAX in varie situazioni, ma non ho trovato una soluzione che funzioni correttamente nel mio scenario specifico.

Le pagine con cui sto lavorando sono l'interfaccia di ricerca di un sito.Inserisci i termini in una normale casella di ricerca, fai clic su "Vai e finisci in una pagina dei risultati di ricerca".Nella pagina dei risultati della ricerca sono presenti numerosi controlli dell'interfaccia utente per filtrare/ordinare i risultati della ricerca per trovare ciò che stai cercando.Alcune delle operazioni attivate da questi controlli potrebbero richiedere un tempo (relativamente) lungo per essere completate (ad es.diversi secondi).

Questa latenza va bene nel caso in cui l'utente stia inizialmente filtrando/ordinando i propri risultati...c'è un bel spinner AJAX e così via...tuttavia, quando l'utente fa clic su un risultato di ricerca e quindi fa clic sul pulsante INDIETRO, vorrei che la pagina venisse immediatamente ripristinata allo stato in cui si trovava quando ha fatto clic.

Posso ripristinare gli stati utilizzando IFRAME/identificatori di frammenti come dizionario della cronologia delle pagine, ma ciò che succede è che quando l'utente preme per la prima volta il pulsante Indietro, viene caricata la pagina iniziale, quindi (ri) esegue la query AJAX per ottenere il stato della pagina indietro, che attiva lo spinner AJAX e un'altra attesa di diversi secondi possibili.

Esiste un approccio che non richieda questo tipo di caricamento della pagina in due fasi quando l'utente ritorna alla pagina tramite il pulsante BACK?

Modificato per aggiungere:Ho un debole per jquery ma sarei felice con soluzioni che dipendano da altre librerie/toolkit o che siano javascript autonomi/grezzi.

Modificato per aggiungere:Avrei dovuto aggiungere che sto cercando di evitare cookie/sessioni perché ciò impedisce alle persone di aprire più finestre/schede del browser e di manipolare diversi set di risultati di ricerca contemporaneamente.

Modificare:Matt, puoi elaborare la soluzione proposta (attivando un evento di cambio pagina tramite identificatore di frammento)?Vedo come questo potrebbe aiutare con i clic sul pulsante INDIETRO nella stessa pagina ma senza tornare alla pagina dei risultati di ricerca dopo aver fatto clic su un risultato specifico.

È stato utile?

Soluzione

Prova ad usare memoria locale oggetto.Ecco le librerie crossbrower jArchiviazione E WEBSHIMS json-storage

Altri suggerimenti

Basta usare a biscotto.

Sarebbe utile attivare un evento di cambio pagina utilizzando l'approccio "Aggiungi alcune informazioni al # alla fine dell'URL".

In questo modo, facendo clic sul pulsante Indietro non dovresti effettivamente modificare la pagina e dovresti essere in grado di ripristinare lo stato senza caricare la prima pagina.

Utilizza qualcosa di persistente che sia legato al profilo dell'utente.

I cookie e le sessioni sono buone idee, ma puoi anche conservare queste cose nel database.Ciò ti dà l'ulteriore vantaggio di poter salvare le preferenze di filtro dell'utente in diverse sessioni di navigazione (se, ad esempio, stava cercando qualcosa in ufficio e poi ha deciso di continuare la ricerca quando è tornato a casa).

Tutto dipende dalla complessità dei filtri e dal tempo o meno, è qualcosa che pensi che l'utente vorrà utilizzare nelle diverse sessioni di navigazione.

Modificato per aggiungere:Avrei dovuto aggiungere che Sto cercando di evitare i cookie/le sessioni perché questo impedisce alle persone di avere più finestre/schede del browser aperte e Manipolazione di diversi insiemi di ricerca risultati allo stesso tempo.

Puoi creare un token casuale e assegnarlo all'identificatore del frammento.

  • al caricamento della prima pagina crea un token se non è impostato alcun identificatore di frammento
  • prima di uscire, memorizza tutti i dati Ajax temporanei in un cookie con quel token come indice.
  • quando si risponde, se è impostato un identificatore di frammento, caricare i dati dal token corrispondente nel cookie.
  • puoi anche aggiungere un campo "ora" per far scadere i token, ecc...

cookie di esempio (JSON):

{"ajaxcache":[{"token":<token>,"time":<time>,"data":<data>}, ... ]}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top