Originariamente inviata da
toreg
Rileggendo pi� volte la tua risposta, ho capito che forse devo strutturare diversamente la mia applicazione!
Attualmente utilizzando l'applicazione ritorno sempre alla pagina principale che con onload mi carica le impostazioni, dovrei semplicemente utilizzare la pagina index come login e per caricare le impostazioni senza pi� tornarci??
E' strutturato correttamente in questo modo??
ciao
difficile dare un giudizio al lavoro degli altri, a meno che non sia proprio sbagliato...
Il punto � che il client potrebbe entrare in qualsiasi punto della tua applicazione, per cui normalmente dovresti prevedere il caricamento in ogni pagina in cui previdi di usare il sistema. Ma si pu� "risparmiare" dati in transito minimizzandoli, quindi al posto di inviare sempre la configurazione completa conviene salvare le configurazioni nel client e dal server inviare sempre un numero di versione, in modo che quando il client valuti che la sua versione � minore vada a fare una chiamata ajax per reperire la nuova versione (quindi la carica solo in questo momento). A questo punto seppure mandi al client la versione in tutte le pagine non fai transitare i dati della configurazione. Diversamente ogni volta dovrai inviare i dati di configurazione. Ma come ti dicevo prima alla fine non � che sia questo grande dispendio di dati... in genere le configurazioni sono pochi dati. Ecco perch� non posso permettermi di dare giudizi, alla fine non � molto differente per le prestazioni.
Alla fine salvare nel client � pi� facile a farsi che a dirsi, chiaramente dipende molto dalla tua preparazione.
In ogni caso ti posso fare un piccolo esempio di come farei io (ti mostro solo la parte client, lato server non c'� molto da mostrare):
codice:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Custom Configuration</title>
<style>
body {
background-color: powderblue;
}
.myContent {
background-color: yellow;
}
</style>
</head>
<body>
<div class="myContent">
<h1 id="el_h1"></h1>
<select id="options">
<option>Ciao</option>
<option>Ola</option>
<option>Hi</option>
</select>
<button onclick="editConfiguration()">Modifica configurazione</button>
<button onclick="downloadFile()">Scarica configurazione</button>
<button><label for="inputfile">Carica configurazione</label></button>
<button onclick="localStorage.clear(); loadConfiguration();">Reset configurazione</button>
<input id="inputfile" style="visibility:hidden;" type="file">
</div>
<script>
const fileName = "Settings.txt", serverVersion = 1;//imposti da PHP
var settings, file = document.getElementById('inputfile'), options = document.getElementById("options");
loadConfiguration();
if (serverVersion > settings.Version)//emula la chiamata al server se la versione locale � minore (edita la versione per non farlo ricaricare)
if (confirm("� presente una versione maggione sul server, si desidera aggiornare?")) editConfiguration();
file.addEventListener('change', () => {
var fr = new FileReader();
fr.onloadend = function () {
localStorage.setItem(fileName, this.result);
loadConfiguration();
}
fr.readAsText(file.files[0]);
});
options.addEventListener("change", () => {
settings.optionSelected = options.selectedIndex;
localStorage.setItem(fileName, JSON.stringify(settings));
loadConfiguration();
})
function editConfiguration() {
localStorage.setItem(fileName, prompt("Inserire configurazione", localStorage.getItem(fileName)));
loadConfiguration();
}
function loadConfiguration() {
settings = JSON.parse(localStorage.getItem(fileName));
if (!settings) {
alert("no local data");
localStorage.setItem(fileName, '{"Version":0, "optionSelected":0, "css":"' + document.getElementsByTagName('style')[0].innerHTML.replace(/(?:\r\n|\r|\n)/g, '') + '"}');
settings = JSON.parse(localStorage.getItem(fileName));
}
var head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style');
head.appendChild(style);
style.type = 'text/css';
style.appendChild(document.createTextNode(settings.css));
document.getElementById("options").selectedIndex = settings.optionSelected;
document.getElementById("el_h1").innerText = "Versione " + settings.Version;
}
function downloadFile() {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(localStorage.getItem(fileName)));
element.setAttribute('download', fileName);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
</script>
</body>
</html>
puoi vederlo in funzione qui
In questo caso potresti impostare tramite PHP il numero di versione (riga 1 dello script js) che l'utente ha salvato nel database, magari indicando per quali device va bene e per quali no, quindi magari il numero di versione non basta e dovrai strutturare un p� di pi�. Ovviamente questa � solo una bozza, quindi ho messo giusto un numero e una condizione. In questo caso il file di default viene creato con versione 0, quindi appena carichi la pagina ti apre un messaggio che ti chiede se vuoi caricare la nuova versione, rispondendo si, si apre un prompt che dovrebbe simulare una chiamata ajax (la stringa che editi sarebbe quella che arriva dalla chiamata ajax al server), a questo punto si presume che il numero di versione sia maggiore di quello impostato dal server, ma ovviamente dovrai modificarlo a mano nel testo del prompt. A questo punto non dovrebbe pi� aprire il prompt (ergo fare la chiamata ajax) fin tanto che il server non imposta la versione ad un numero maggiore di quello della configurazione che hai salvato.
Puoi anche salvare e caricare i file direttamente dal client, in questo modo potresti semplicemente condividere le configurazioni con i device che preferisci ed avere tutte le versioni che vuoi cambiandole quando e come vuoi.
Ricapitolando, l'esempio funziona cos�:
Se si tratta del primo avvio, lo script legge il css della pagina e lo mette nella proprieta css del file nello storage locale (da ora sarà quello che si carica sempre che puoi modificare); mette la versione a 0; e l'indice della preferenza nell'elenco a discesa con indice 0. Confrontando la versione passata dal server nota che � maggiore quella del server, quindi apre il prompt (emula la chiamata ajax) dove puoi editare a mano la configurazione (che � scritta come json), dovrai editare la versione (da 0 a maggiore o uguale a 1) se no continuer� a chiedertelo ad ogni caaricamento.
Fatto questo il resto viene da se: se cambi scelta nel menu a discesa lo salva nella configurazione e quindi te lo ritrovi, se clicchi su modifica si aprir� il prompt e potrai editare la configurazione che verr� salvata automaticamente. Inoltre potrai scaricare il file con la configurazione attuale e potrai caricarla ad esempio dopo aver fatto modifiche. Infine puoi resettare il tutto e cancellare tutti i dati nel local storage.
Nel caso abbia dificolt� a capire qualche parte non avere timore di chiedere. Comunque non dovrebbe essere complesso.
Rispondi quotando
