In questo articolo esamineremo la libreria Javascript PersistJs da poco rilasciata da Paul Duncan sotto licenza Open Source.
Si tratta di una delle tante librerie di "Persistent Storage" nate in questo periodo a fronte della necessità di trovare un metodo alternativo al cookie per la memorizzazione dei dati lato client.
Prima che queste librerie venissero alla luce, l'unico metodo cross-platform e cross-browser per la memorizzazione dei dati, erano appunto i cookies. Purtroppo questi magici "biscottini" presentano alcune limitazioni:
- La dimensione: i cookie hanno un limite di circa 4kb
- L'uso della banda: ogni singolo cookie è inviato ad ogni richiesta HTTP
- La gestione dati: difficoltà nella manipolazione dei dati residenti nei cookie
I browser attualmente sul mercato hanno cercato di superare queste limitazioni aggiungendo un metodo alternativo ai cookie per la memorizzazione dei dati lato client. Ciascuna di queste soluzioni è di semplice utilizzo e promette di memorizzare una maggior mole di dati rispetto ai cookie, ma purtroppo, ogni browser, ha superato queste limitazioni a comparti stagni creando problemi di incompatibilità.
Esistono attualmente quattro soluzioni di memorizzazione:
- globalStorage: Firefox 2.0+, Internet Explorer 8
- localStorage: development WebKit
- openDatabase: Safari 3.1+
- userdata behavior: Internet Explorer 5.5+
Nel frattempo, alcuni sviluppatori hanno pensato bene di creare nuovi sistemi di memorizzazione attraverso l'uso di plugin lato browser e tra i più noti possiamo citare Adobe Flash e Google Gears.
Ma anche in questo caso, non si può certo dire che la nostra odissea sia finita. Infatti, il corretto funzionamento della nostra applicazione, risulta essere correlato alla presenza di tale plugin.
Detto questo, possiamo intuire che una soluzione definitiva al problema deve ancora essere partorita; tuttavia possiamo contare su un buon numero di soluzioni frazionate in diversi ambiti e, PersistJS fa proprio al caso nostro perché le riunisce tutte in diversi tipi di backend.
Ogni backend si avvale della medesima interfaccia e ciò significa che non dobbiamo conoscere o preoccuparci di quale sistema andremo ad implementare riducendo così drasticamente la curva di apprendimento della libreria in questione.
Ecco una lista dei beckend supportati:
- Flash
- Gears
- Localstorage
- Whatwg_db
- Globalstorage
- Userdata behavior
- Cookie
PersistJs in azione
L'uso di PersistJs è semplice. Il codice implementa una struttura dati persistente, simile ad un array associativo, che rimane disponibile anche dopo il cambio pagina o la chiusura del browser da parte dell'utente.
Il primo passo per usare PersistJs consiste nel caricare il seguente script:
<!-- Carico la libreria PersistJs -->
<script type='text/javascript' src='persist-min.js'></script>
Oppure caricare la libreria completa che aggiunge la gestione di Flash e Gears, aumentandone però il peso di circa il 60% da quella standard sopra riportata:
<!-- Carico la libreria PersistJs All -->
<script type='text/javascript' src='extras/persist-all-min.js'></script>
Dopodiché al termine del caricamento del DOM inizializziamo un oggetto di "store" in questo modo:
<body onload='load_data();'> ... <script type="text/javascript"> // contenitore globale dell'oggetto var store; function load_data() { // Inizializza lo store dopo che il DOM ha terminato il caricamento store = new Persist.Store('Mia Applicazione'); } </script>
Il costruttore richiede un solo parametro: il nome con il quale chiamare lo Store.
È possibile creare più Store in contemporanea, ma la cosa importante è identificare ogni singolo Store in modo univoco, assegnandogli nomi diversi.
Un volta creato il nostro Persistent Store possiamo popolarlo con dei dati; questi devono essere obbligatoriamente in formato stringa e in ogni caso, se si ha la necessità di salvare dati strutturati, come ad esempio un Array, basta prima serializzarli usando Array.join o JSON.
Ecco la sintassi:
// Salvo dei dati nello Store
store.set('id per identificare i dati', 'dati');
Leggere i dati appena salvati è altrettanto semplice ed intuitivo:
// Recupero i dati, usando il loro identificativo e li mostro all'utente // con una funzione di Callback store.get('id per identificare i dati', function(ok, val) { if (ok) alert('dati= ' + val); });
Ed eliminare i dati? Semplice:
// Rimuove i dati dallo Store
store.remove('id per identificare i dati');
Diciamo che questa è la base da cui partire per iniziare a utilizzare e comprendere il funzionamento di questa libreria giunta appena alla versione 0.1, ma che promette grandi e positive sorprese.
Ovviamente, come dichiarato dall'autore, essendo la prima release potrebbe essere non esente da bug; per approndire l'argomento vi rimando al sito dell'autore.
