Finestre modali salvate con cookies o local storage

Finestre modali salvate con cookies o local storage postato il 24/10/2022 13:25:53 nel forum programmazione, open source e hosting

Seguendo i suggerimenti indicati qui:
https://www.gdr-online.com/readforum.asp?id=197803 ↗

sono riuscita a far in modo che le finestre modali siano ridotte a icona.

Qualcuno saprebbe indirizzarmi su un modo per "conservare" le modali ridotte a icona anche se la pagina cambia? In particolare, ipotizziamo che io sia in chat e apra due schede avatar in popup cliccando su due diversi personaggi mittenti e li riduca ad icona. Vorrei poterli preservare anche se esco dalla pagina della chat e navigo per le altre pagine della land.

E' fattibile?

A naso penso che potrei usare i cookies o local storage, però non sono così addentro nella programmazione (soprattutto in javascript) per avere una vaga idea del come.

Ogni aiuto sarebbe assai gradito...

04/11/2022 00:07:00

Innanzitutto ti consiglierei di usare localStorage ma il sessionStorage. La differenza tra i due è sostanzialmente che nel primo i dati restano in memoria fino a quando non viene pulita la cache o fino a quando lo script non ordina la pulizia, il secondo pulisce i dati alla chiusura del browser o del tab.

usare sessionStorage è semplice la sua sintassi è:

sessionStorage('chiave','valore');

o

sessionStorage.chiave = valore

c'è da ricordarsi che come valore vengono accettate solo stringhe e non array o oggetti per cui se vuoi salvare un array con l'elenco delle finestre di popup aperte devi prima trasformarlo in stringa e quando lo recuperi riconvertirlo.

Si fa facilmente con una forma tipo questo esempio

sessionStorage.modal = JSON.stringify(modal );
var modal = JSON.parse(sessionStorage.modal);

Questa è la parte semplice, la parte più lavoriosa è che nella funzione delle modali, sevi prendere e salvare quando ne apri una devi prima leggere il contenuto di

sessionStorage.modal

ritrasformarlo in un array come ho scritto sopra, aggiornare o salvare nell'array i dati della modale che ti interessano
fare in modo che quando chiudi la modale con la X i dati di questa vengano rimossi dal
sessionStorage.modal

e a fine della pagina nel footer mettere ciclare sessionStorage.modal per riaprire le finestre.

C'è da considerasre 3/4 del tuo problema dipende dal fatto che il gdrcd ricarica tutto quando passi da una pagina all'altra, ricaricando solo la porzione necessaria tramite ajax le modali ti rimarrebbero aperte senza doverle riaprire ogni volta.

04/11/2022 11:03:24

Intanto grazie per la risposta ^_^
Con onestà, ammetto che da smanettona non-programmatrice, mi mancano proprio le basi per andare avanti.

Ho chiesto anche su Stack Overflow e questo è quello che mi è stato risposto.



You have a function that you call with few parameters. I would save those parameters in localStorage, then when reloading the page I would read the content of LS and call the function.

var modals = localStorage.getItem('modals');

if (modals) {
modals = JSON.parse(modals);
} else {
modals = [];
}

modals.forEach(args => {
modalWindow(...args);
});

function modalWindow(name, title, url, width, height) {
...
modals.push([name, title, url, width, height]);
localStorage.setItem('modals', JSON.stringify(modals));
}

You probably also want to remove the modal from the list when you close it. You can come up with a better data structure that will allow you to do that.


Scusate se posto la risposta così com'è, quindi in inglese.

Ma anche così, non ho proprio le competenze tecniche per riuscire a ottenere qualcosa :(

Per il momento, credo che metterò questo task in stand-by :(