Per creare una pagina dinamica , ovvero creata sulla base di dati reali, che può e potrebbe essere modificata in qualsiasi momento, è necessario disporre di un archivio dati.
Quando iniziamo a costruire pagine dinamiche che contengono dati che possono cambiare, essere manipolati e aggiunti in qualsiasi momento, le cose iniziano a diventare interessanti. Essere in grado di archiviare dati è il presupposto essenziale per la creazione di una pagina Web o di un’applicazione Web dinamica.
Cosa si intende per “archiviazione dei dati”?
In poche parole, per archiviazione dei dati si intendono tutte le procedure e i mezzi necessari per archiviare e recuperare i dati. Nelle applicazioni web, l’archiviazione dei dati avviene solitamente sotto forma di un database gratuito o meno (mysql, postgres, sql server solo per citarne alcuni), ma esistono anche altri mezzi (come vedremo tra poco).
Fondamentalmente, l’archiviazione dei dati consente di salvare informazioni che esistono ancora anche dopo la chiusura del browser, garantendone la persistenza.
In termini di pagina web o applicazione web, questo concetto, apparentemente semplice, consente di implementare varie funzionalità a noi ormai tanto comuni, come: creare un account utente con credenziali di accesso associate; memorizzare le informazioni del profilo utente; creare connessioni tra utenti, solo per citarne alcuni. Tutte le applicazioni web moderne quindi richiedono in un modo o nell’altro l’archiviazione dei dati, con pochissime eccezioni.
Come funziona l’archiviazione dei dati
Per iniziare, c’è da dire che il flusso di dati è bidirezionale: interazione dell’utente → dati inviati; interazione utente ← dati recuperati.
DALL’ARCHIVIO DEI DATI ALLA PAGINA
L’esempio più semplice è quando carichiamo lo stream delle notizie sui social. In tal caso, ad esempio, tutti i post recenti del feed vengono recuperati dall’archivio dati del social network in modo che possano essere visualizzati sulla pagina.
DALLA PAGINA ALL’ARCHIVIO DEI DATI
Restando in tema di social, quando inviamo un messaggio tramite Facebook, in realtà non lo stiamo realmente inviando come avviene con la posta elettronica. In tal caso, le informazioni vengono inviate all’archivio dati di Facebook, per essere archiviate in modo che possano essere consegnate al destinatario.
Introduzione all’archiviazione locale
In genere, per implementare l’archiviazione dei dati, dovremmo installare il software del database su un server web, configurare tutto, stabilire modi in cui le pagine possono comunicare con esso, ecc.
Con l’html 5, invece di affrontare tutto questo, possiamo utilizzare una sorta di database “integrato” nel browser moderno noto come Local Storage.
Fondamentalmente, il Local Storage di un browser è simile a un database: ci consente di archiviare, recuperare, rimuovere e manipolare i dati, tutto direttamente all’interno del browser, senza però aver bisogno di un database.
In realtà è solo un grande archivio di valori-chiave (molto simile agli array PHP), che può essere gestito direttamente tramite Javascript, senza alcuna configurazione preventiva richiesta. Quindi, ad esempio, possiamo inserire un valore:
localStorage.setItem("init", "Hello world!");
recuperare quel valore:
let init = localStorage.getItem("init");
e quindi eliminare il valore, quando abbiamo finito:
localStorage.removeItem("init");
Una struttura dati, tipo un record, può essere gestito con la stessa facilità di una stringa, utilizzando la notazione e le librerie JSON. Tuttavia per essere chiari, ci sono molteplici limitazioni di cui essere consapevoli…
Limitazioni dell’archiviazione locale
- Prima di tutto, i dati di archiviazione locale vengono archiviati solo localmente , all’interno del proprio browser web. Non è possibile accedervi tramite il mondo esterno.
- In secondo luogo, puoi archiviare solo stringhe nell’archivio locale, nessun altro tipo, specie se parliamo di dati binari.
- Infine, non ci sono così tante opzioni di configurazione e modi per archiviare e recuperare dati dall’archiviazione locale.
Detto questo, l’archiviazione locale può essere estremamente conveniente e, nonostante queste limitazioni, può comunque essere molto soddisfacente lavorarci.
Utilizzo di JSON
Come già detto, anche se possiamo memorizzare solo stringhe nell’archiviazione locale, possiamo usare JSON – o Java Script Object Nototation, anche a memorizzare oggetti e array.
JSON è un formato standard per rappresentare oggetti dati costituiti da coppie chiave-valore come stringhe. E poiché questo è essenzialmente ciò che sono gli oggetti e gli array in JavaScript, è perfetto per ciò che dobbiamo fare. In effetti, le stringhe JSON assomigliano esattamente agli oggetti JavaScript. Ad esempio:
var bertObj = { "best_friend": "Ernie" };
La stringa JSON corrispondente è la seguente:
{ "best_friend": "Ernie" }
Esattamente la stessa. E questo, a sua volta, ci rende molto semplice archiviare oggetti e array JavaScript nell’archiviazione locale.
Con l’aiuto di altre due funzioni integrate nei browser moderni, JSON.stringify() e JSON.parse(), che ci consentono di convertire oggetti rispettivamente in stringhe JSON e viceversa, diventa tutto molto banale.
In questo esempio puoi vedere come viene creato un oggetto JavaScript; convertito in una stringa JSON; inserito nell’archiviazione locale; recuperato dall’archivio locale (come stringa); e infine riconvertito in un oggetto:
// oggetto originale
var automobile = {"marca":"mercedes", "modello":"C22"};
// Trasformiamo l'oggetto in una stringa
var automobile_string = JSON.stringify(automobile );
// salviamo la stringa in Local Storage
localStorage.setItem("auto", automobile_string );
// Se vogliamo recuperare il valore da Local Storage,
// dobbiamo procedere al contrario, quindi:
var automobile_string = localStorage.getItem("auto");
var automobile = JSON.parse(automobile_string);
A quel punto nella variabile automobile, avremo il nostro oggetto con cui potremo effettuare tutte le operazioni che già conosciamo per gli oggetti. Analogamente a quanto visto per gli oggetto, il concetto vale per gli array.
L’utilizzo di Local Storage non richiede prerequisiti (poiché è integrato direttamente nel browser); non è richiesta alcuna installazione o configurazione di software; è facile accedervi e interagire tramite un semplice JavaScript.
Quando è da preferire l’archiviazione su database?
Sebbene l’archiviazione locale sia abbastanza conveniente, la maggior parte delle applicazioni Web dinamiche nel mondo reale utilizzeranno comunque database reali, perchè consentono di ospitare dati che possono effettivamente essere condivisi e mostrati ad altri; non è quindi limitato al proprio browser, come nel caso dell’archiviazione locale.
I database offrono inoltre la possibilità di archiviare più tipi di informazioni, come numeri, date e altro, a differenza dell’archiviazione locale in cui possiamo archiviare solo stringhe. Inoltre, i database ti offrono anche molti modi utili e aggiuntivi per archiviare, organizzare e recuperare i tuoi dati, rispetto all’archiviazione locale.
