Inizio Interfaccia utente sul blog (YUIBlog)

Nel YUI 3 Galleria: Ryan Grove storage Lite Cross-Browser Biblioteca di archiviazione

23 Febbraio 2010 alle 07:46 da Ryan Grove | In sviluppo , YUI 3 Galleria | 6 commenti

Con i browser più l'aggiunta del supporto per la Web HTML5 storage API , il futuro promette bene per le applicazioni web che necessitano di persistente sul lato client memorizzazione dei dati. Purtroppo, mantenendo la compatibilità con i browser che non supportano ancora Web Storage può essere una sfida, e abbandonare il supporto per i browser meno recenti è raramente una scelta accettabile.

L' archiviazione Lite YUI 3 Galleria modulo , che è stato sviluppato per l'uso su Yahoo! Ricerca , mira a risolvere questo problema fornendo un semplice involucro leggero API per una varietà di persistente sul lato client meccanismi di stoccaggio senza dipendenze plugin esterni di qualsiasi tipo (nemmeno flash). Pesa circa 2.6KB dopo minimizzazione e prima gzip, è simile alla API di HTML5 localStorage, e lavora in IE6 +, Firefox 2 +, Safari 3.1 +, 4 + Chrome e Opera 10.5 +.

Oltre ad essere basata su YUI 3, Deposito Lite si differenzia dalla esistente YUI 2 Storage Utility in vari modi. YUI 2 Storage è una robusta implementazione ed estensibile che rimane più fedele alle API di HTML5 e localStorage sessionStorage (per esempio, fornisce un evento di modifica e di una key() metodo, che di stoccaggio Lite non). YUI 2 Stoccaggio ricade anche sulla schiena di memorizzazione Flash o Gears per i browser meno recenti, che possono in alcuni casi, fornire una migliore persistenza e la capacità di memorizzazione. Stoccaggio Lite mestieri estensibilità e plug-based ricadute per leggerezza e prestazioni migliori, e si concentra in particolare sulla emulare solo localStorage.

Date un'occhiata a questo esempio notepad persistente per vedere storage Lite in azione, o leggere attraverso le seguenti non interattivo esempio di codice per un giro veloce della API.

In primo luogo, includere lo script:

 <Script src = "http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js & 
  gallery-2010.02.22-22/build/gallery-storage-lite/gallery-storage-lite-min.js "> </ script>

Nel tuo codice di implementazione, bisogna intercettare l' storage-lite:ready evento, che viene generato quando il meccanismo di archiviazione è pronto per l'uso. Dopo che il meccanismo di archiviazione è pronto, è possibile utilizzare l'API:

 YUI (). Uso ('galleria-storage-lite', function (Y) {

     / / Per la piena compatibilità con Internet Explorer 6-7 e Safari 3.x, bisogna intercettare l'
     / / Storage-lite: evento pronto prima di effettuare chiamate di stoccaggio.  Se non siete
     / / Come obiettivi i browser, è possibile ignorare questo passaggio.
     Y.StorageLite.on ('storage-lite: pronto', function () {

         / / Per memorizzare un oggetto, passare una chiave e un valore (entrambe le stringhe) a setItem ().
         Y.StorageLite.setItem ('cuccioli', 'soffici e carino');

         / / Se si imposta il terzo parametro opzionale a true, è possibile utilizzare qualsiasi
         / / Oggetto serializzabile come valore e sarà automaticamente memorizzato
         / / Come una stringa JSON.
         Y.StorageLite.setItem ('torte', ['mela', 'zucca', 'pecan'], true);

         / / Per recuperare un oggetto, passare la chiave per getItem ().
         Y.StorageLite.getItem ('cuccioli'); / / => 'soffici e carino'

         / / Per recuperare e analizzare automaticamente un valore di JSON, impostare l'opzione
         / / Secondo parametro a true.
         Y.StorageLite.getItem ('torte', true); / / => ['mela', 'zucca', 'pecan']

         / / Il metodo length () restituisce un conteggio di quanti elementi sono al momento
         / / Memorizzato.
         Y.StorageLite.length () / / => 2

         / / Per rimuovere un singolo elemento, passare la chiave per removeItem ().
         Y.StorageLite.removeItem ('cuccioli');

         / / Per rimuovere tutti gli oggetti in deposito, chiamata clear ().
         Y.StorageLite.clear ();

     });

 });

I dati memorizzati mediante archiviazione Lite viene mantenuta attraverso pagine e del browser ^* riavviato, ed è accessibile solo dallo stesso dominio in cui è stato memorizzato. Dietro le quinte, Deposito Lite utilizza i meccanismi di stoccaggio seguenti, scegliendo automaticamente la migliore che è supportato:

• Firefox 3.5 +, 4 + Chrome, Safari 4 +, IE8, Opera 10.5 +: HTML5 localStorage - tutti i browser moderni supportano la funzionalità di base localStorage definito nel progetto HTML5.
• Firefox 2.xe 3.0.x: Gecko globalStorage , un'API primi simile a localStorage di HTML5.
• Safari 3.1 e 3.2: archiviazione di database HTML5 , perché Safari 3.1 e 3.2 non supportano HTML5 localStorage.
• IE6, IE7: userData persistenza , una caratteristica raramente usato IE per l'associazione di dati di tipo stringa con un elemento in una pagina web e persistente che tra una pagina visualizzata.

Per ulteriori dettagli, vedere la storage Lite GitHub progetto e le API di riferimento .

* Caveat: IE6 e IE7 persistenza dei dati tra pagine visualizzate, ma non attraverso i riavvii del browser.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!