L'archiviazione locale HTML5 è come i cookie sugli steroidi; è incredibilmente semplice da usare e tuttavia ancora così potente. In questo tutorial, ti mostrerò come creare la funzionalità "sticky notes", che consente agli utenti di prendere appunti persistenti durante la navigazione del tuo sito.

Passaggio 1: HTML

A causa della natura dinamica di questo progetto, non c'è molto da codificare nel modo di regolare vecchio markup semantico. Semplicemente simuleremo una pagina web mettendo insieme dei contenuti di riempimento:

           
  
 Titolo articolo campione
  
Lorem ipsum dolor ... 
   
       

Ci sono alcune cose importanti da notare qui: stiamo includendo due file CSS: il primo è lo stile semplice per la pagina, che abbiamo chiamato default.css. Quindi, abbiamo uno speciale file CSS per gli stili relativi alle nostre note adesive; è chiamato stickies.css, e come puoi vedere, vive nella cartella "stickies". In basso, includiamo quattro script:

• jQuery, dal CDN di Google
• Interfaccia utente di JQuery, dal CDN di Google
• JSON2, da Douglas Crockford
• Il nostro stickies.js, che vive nella directory "stickies"

Quindi, abbiamo un tag script vuoto che useremo per avviare il motore un po 'più tardi.

E questo è tutto per l'HTML!

Passaggio 2: il CSS

Il contenuto di default.css è incredibilmente semplice:

 body margin: 0; padding: 0; sfondo: #ccc; font: 14px / 1.5 "Helvetica Neue", Helvetica, Arial, san-serif;  article, footer, header display: block;  article width: 880px; sfondo: #fff; margin: auto; padding: 40px;  article header color: # 474747; border-bottom: 1px solid # 474747 article footer font-size: 90%; colore: #ccc; 

Questo è tutto; ora, c'è il CSS da stickies.css a cui badare ... ma non abbiamo ancora quel markup. Quindi iniziamo un po 'di JavaScript, e quando ciò sarà fatto, esamineremo il CSS per le note adesive.

Passaggio 3: JavaScript

Ecco lo scheletro per la nostra applicazione JavaScript:

 var STICKIES = (function () var initStickies = function () , openStickies = function () , createSticky = function (data) , deleteSticky = function (id) , saveSticky = function ()  , markUnsaved = function () ; return open: openStickies, init: initStickies; ());

Abbiamo alcune tecniche interessanti in corso qui. La prima è la funzione autoinvolgente: potrebbe sembrare che stiamo assegnando una funzione alla variabile STICKIES, ma se guardi da vicino la fine della funzione, vedrai che lo stiamo eseguendo immediatamente. Come suggerimento - per ricordarci che questa non è una funzione normale - stiamo avvolgendo l'intera funzione tra parentesi. Così, STICKIES non è una funzione, è il valore restituito da quella funzione, che è un oggetto, in questo caso.

Questo ci porta alla tecnica successiva: la chiusura. Nota che delle sei funzioni che creiamo, solo due di esse sono esposte all'utente (in realtà, solo una è necessaria per l'utilizzo che stiamo pianificando, se volessimo creare il supporto per la creazione di note nel tuo sito web, potremmo esporre il createSticky e deleteSticky). Anche se la funzione autoinvolgente termina l'esecuzione prima ancora che usiamo i metodi, saremo in grado di utilizzare le altre funzioni che abbiamo definito.

Ok, passiamo al contenuto di queste funzioni.

initStickies

Inizieremo guardando il initStickies funzione:

 var initStickies = function initStickies () $ ("
", text:" + "," class ":" add-sticky ", fai clic su: function () createSticky ();). prependTo (document.body); initStickies = null;,

Questo è piuttosto semplice. Useremo jQuery per creare elementi un po ', e stiamo usando una sintassi speciale nella v. 1.4: che passa un oggetto letterale con le specifiche per l'elemento come secondo parametro della funzione jQuery. Qui, stiamo creando un pulsante per creare una nuova nota. Ciò significa che abbiamo bisogno di un nuovo div; stiamo impostando il testo su "+" e assegnandogli una classe "add-sticky"; quindi, stiamo impostando un gestore di clic per chiamare il createSticky metodo (è importante chiamare createSticky dall'interno di una funzione e non chiamare direttamente il gestore di clic createSticky; questo è perché createSticky può prendere un singolo parametro e non vogliamo che questo sia l'oggetto evento). Finalmente, stiamo preparando questo div al corpo. Finiamo impostando initStickies a nullo; sì, essenzialmente ci stiamo liberando della funzione che stiamo eseguendo. Questo ci assicura che questa funzione verrà eseguita una sola volta; non vogliamo che l'utente della nostra API aggiunga inavvertitamente più pulsanti "aggiungi nota" alla pagina.

openStickies

Passiamo al metodo successivo, openStickies:

 openStickies = function openStickies () initStickies && initStickies (); per (var i = 0; i < localStorage.length; i++)  createSticky(JSON.parse(localStorage.getItem(localStorage.key(i))));  ,

Iniziamo correndo initStickies... ma cos'è la sintassi di fantasia? Beh, probabilmente lo conosci && operatore: l'operatore booleano AND. Lo userai solitamente per controllare più condizioni in una dichiarazione if. Ecco cosa fa effettivamente: valuta la prima espressione e, se ciò risulta vero, continuerà a valutare la seconda espressione. In questo caso, se initStickies non è stato ancora impostato su null, eseguiremo la funzione. Ciò evita l'errore che proviene dal tentativo di eseguire una variabile nulla come funzione.

Successivamente, eseguiremo il looping di ogni elemento in localStorage. Ecco cosa facciamo in quel ciclo continuo (dall'interno all'esterno):

• localStorage.key () è una grande funzione che restituisce il nome chiave di memoria locale valore; prende un numero come parametro. È un ottimo modo per scorrere su ogni elemento in memoria locale.
• Una volta che abbiamo la chiave per un oggetto memorizzato, possiamo passarlo a localStorage.getItem () per ottenere il suo valore.
• Quindi, passiamo questo valore a JSON.parse (); questo proviene dalla biblioteca di Crockford. Perché stiamo memorizzando alcuni valori per ogni nota, che stiamo usando JSON.stringify () dall'altra parte per trasformare un oggetto in una stringa JSON, che memorizziamo. Qui, lo convertiamo da una stringa in un oggetto.
• Alla fine, passiamo a quell'oggetto createSticky (), che lo trasforma in una nota adesiva.

createSticky

Ora, diamo un'occhiata a questo createSticky metodo.

 createSticky = function createSticky (data) data = data || id: + new Date (), top: "40px", a sinistra: "40px", testo: "Note Here" return $ ("
", " class ":" sticky "," id ": data.id) .prepend ($ ("
", " class ":" sticky-header ") .append ($ ("", " class ":" status-sticky ", fai clic su: saveSticky)) .append ($ ("", " classe ":" close-sticky ", testo:" trash ", fare clic su: function () deleteSticky ($ (this) .parents (". sticky "). attr (" id ")); ))) .append ($ ("
", html: data.text, contentEditable: true," class ":" sticky-content ", keypress: markUnsaved)) .draggable (handle:" div.sticky-header ", stack:" .sticky ", start: markUnsaved, stop: saveSticky) .css (position: "absolute", "top": data.top, "left": data.left) .focusout (saveSticky) .appendTo (document.body);,

Sì, è lungo, ma non sarà troppo difficile. Innanzitutto, nota che questa funzione accetta un oggetto dati; come abbiamo appena visto openStickies, stiamo passando i dati memorizzati a questa funzione. Tuttavia, se non stiamo passando alcun dato (ad esempio, stiamo creando una nuova nota), creeremo l'oggetto note predefinito. Poiché tutte le note devono essere create in un punto, tutte le note inizieranno con questa configurazione. Si noti che per l'ID della nota, stiamo usando +nuova data (); l'operatore unario plus anteposto converte la data che otteniamo da una nuova data in un numero, quindi questa dichiarazione si traduce in un numero che rappresenta il numero di millisecondi dal 1 ° gennaio 1970. Ovviamente, questo numero cambierà continuamente, quindi è un ottimo modo per identificare in modo univoco ogni nota.

Il resto della funzione è una lunga serie di metodi jQuery concatenati. Prima di passare a questo, si noti che stiamo restituendo il risultato. Se esponiamo questo metodo agli sviluppatori che usano la nostra API mirco, restituirebbe un riferimento all'elemento div di nota adesiva.

Quindi, ecco cosa sta succedendo:

• In primo luogo, creiamo il div questo è il guscio della nota adesiva. Usando quell'utile sintassi di jQuery 1.4, gli diamo una classe di "sticky" e l'id dall'oggetto dei dati.

• Quindi, ci appoggiamo a div a quello; Questo div ottiene una classe "sticky-header". div.sticky-header quindi riceve due span aggiunti. Il primo, span.sticky-status, ottiene un gestore di clic che chiama il saveSticky funzione. Tuttavia, questa è in realtà una funzionalità nascosta: questa span mostrerà lo stato di sticky: salvato o non salvato. Ci saranno alcuni modi in cui il sticky salva i suoi dati memoria locale; è possibile che l'utente penserà che facendo clic su 'unsaved' salverà la nota, quindi forniremo loro tale funzionalità. La seconda campata, span.close appiccica, sarà il pulsante di cancellazione: quando l'utente fa clic, rimuoveremo l'appiccicoso da memoria locale, via il deleteSticky metodo. Passiamo questo metodo alla nota id.

• Successivamente, aggiungiamo un altro div al main div.sticky; notare che abbiamo impostato il html proprietà a data.text; quando salviamo il testo della nota, stiamo usando jQuery html () metodo, perché usando testo() sbarazzarsi delle interruzioni di linea. Abbiamo anche impostato contentEditable: true su questo div, perché è il contenuto della nota. Come tale, ottiene anche la classe appiccicoso-content. Infine, quando viene premuto un tasto su questo div (che significa che l'utente sta modificando il contenuto), vogliamo contrassegnarlo come non salvato, quindi chiameremo quella funzione (che faremo presto).

• Ora, stiamo usando la funzione trascinabile dell'interfaccia utente jQuery per rendere la nostra nota adesiva mobile. Nel nostro oggetto parametro, stiamo usando il maniglia proprietà per rendere le nostre note mobili solo dalla barra di intestazione. Il pila la proprietà è un selettore per gli elementi trascinabili da "impilare"; impostando questo, la nota attualmente trascinata verrà sempre in cima. Infine, quando iniziamo a trascinare la nota, vogliamo contrassegnarla come "non salvata" (perché dobbiamo salvare anche le sue coordinate), e quando smettiamo di trascinare, salveremo quella appiccicosa.

• Successivamente, stiamo impostando alcuni stili per il nostro div.sticky; lo posizioniamo in modo assoluto, quindi impostiamo i valori superiore e sinistro su quelli nell'oggetto dati. In questo modo, la nota manterrà la sua posizione e il suo contenuto quando aggiorneremo la pagina.

• Infine, imposteremo un gestore di eventi per quando noi focusOut dell'appiccicoso (in sostanza, clicca all'esterno dopo aver cliccato al suo interno): vogliamo salvare l'appiccicoso. Infine, lo aggiungeremo al corpo. Per riferimento, ecco la struttura html che avremmo dovuto generare:

 
  spazzatura 
 
 Nota qui 
 

E questo è il nostro createSticky funzione.

deleteSticky

Ora abbiamo il deleteSticky funzione; è davvero semplice:

 deleteSticky = function deleteSticky (id) localStorage.removeItem ("sticky-" + id); $ ("#" + id) .fadeOut (200, function () $ (this) .remove ();); ,

Come ricordi, il deleteSticky la funzione prende l'id di una nota come parametro. localStorage.removeItem () è il metodo dell'ora: passiamo la chiave a un valore memorizzato localmente per rimuovere quella coppia chiave-valore (Si noti che quando memorizziamo i dati delle note, preponiamo "sticky-" all'id). Quindi, troviamo l'elemento con l'id dato, lo sbiadisce e lo rimuoviamo. Nota cancellata!

saveSticky

Il penultimo potrebbe essere il metodo più importante oggi: saveSticky: questa è la colla che fa funzionare tutto.

 saveSticky = function saveSticky () var that = $ (this), sticky = (that.hasClass ("sticky-status") || that.hasClass ("sticky-content"))? that.parents ('div.sticky'): that, obj = id: sticky.attr ("id"), in alto: sticky.css ("top"), a sinistra: sticky.css ("left"), text : sticky.children (". sticky-content"). html () localStorage.setItem ("sticky-" + obj.id, JSON.stringify (obj)); . Sticky.find ( "sticky-stato ") del testo (" salvato"); ,

La prima riga è un po 'di risoluzione: ci sono tre diversi elementi da cui possiamo chiamare questa funzione. In primo luogo, "jQuerify" Questo in quello; quindi, se l'elemento ha o le classi "sticky-status" o "sticky-content", otterremo il genitore div.sticky; se non ha nessuna di quelle classi, allora è div.sticky stesso, quindi lo useremo.

Quindi, dobbiamo ottenere i valori che vogliamo memorizzare. Come puoi vedere, stiamo ottenendo l'id, l'offset dalla parte superiore e sinistra e l'html del bambino .appiccicoso-content; ricorda, stiamo usando html () invece di testo() perché vogliamo mantenere le interruzioni di riga. Quindi, usiamo localStorage.setItem per memorizzare i dati. Ricorda, ci vogliono due parametri: la chiave e il valore da memorizzare. Da memoria locale memorizza solo stringhe, usiamo JSON.stringify () per convertire l'oggetto in una stringa.

Infine, modifica lo stato permanente su "salvato".

markUnsaved

Abbiamo un'ultima funzione, che è solo una funzione di aiuto:

 markUnsaved = function markUnsaved () var that = $ (this), sticky = that.hasClass ("sticky-content")? that.parents ("div.sticky"): quello; sticky.find ( "sticky-stato. ") del testo (" non salvato."); 

Ancora una volta, dobbiamo iniziare risolvendo il riferimento a div.sticky; una volta fatto, possiamo semplicemente trovare lo stato e impostare il testo su "non salvato".

Che ci crediate o no, questo è tutto il codice JavaScript.

Passaggio 4: il CSS, rivisitato

Ora che sappiamo qual è il nostro markup delle note appiccicose, possiamo modellarlo. È piuttosto semplice; ma guardalo, e farò alcuni commenti alla fine:

 : focus struttura: 0;  .add-sticky cursor: default; position: absolute; top: 1px; a sinistra: 1px; font-size: 200%; background: # 000; color: #fff; border: 2px solid #fff; border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; text-align: center; line-height: 25px; larghezza: 30px; altezza: 30px;  .add-sticky: hover background: # 474747;  .sticky width: 300px; sfondo: #fdfdbe; box-shadow: 3px 3px 10px rgba (0,0,0,0,45); -webkit-box-shadow: 3px 3px 10px rgba (0,0,0,0,45); -moz-box-shadow: 3px 3px 10px rgba (0,0,0,0,45);  .sticky-content min-height: 150px; border-left: 3px double rgba (238, 150, 122, .75); margin-left: 30px; padding: 5px;  .sticky-header padding: 5px; background: # f3f3f3; border-bottom: 2px solid #fefefe; box-shadow: 0 3px 5px rgba (0,0,0,0.25); -webkit-box-shadow: 0 3px 5px rgba (0,0,0,0.25); -moz-box-shadow: 0 3px 5px rgba (0,0,0,0.25);  .sticky-status color: #ccc; padding: 5px;  .close-sticky background: # 474747; float: right; cursore: predefinito; colore: #ececec; imbottitura: 1px 5px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; 

Ci sono alcuni punti di interesse qui:

• Alcuni browser creano uno schema intorno agli elementi contenteditable = true quando stai modificando il contenuto. Non lo vogliamo, quindi ce ne sbarazziamo con il nostro :messa a fuoco dichiarazione.
• Il pulsante "Aggiungi appiccicoso" è posizionato nell'angolo in alto a sinistra; sembra vagamente simile a "Aggiungi Dashboard Widget" in Mac OS X..
• Usiamo le proprietà CSS3 border-radius e box-shadow (e le loro incarnazioni prefisso-fornitore appropriate).
• Stiamo anche usando RGBA () per i nostri colori ombra. Sono necessari quattro parametri: il rosso, l'avidità e i colori blu e il valore alfa (trasparenza).

Oltre a questo, è solo il tuo standard CSS. Ecco come dovrebbe apparire una nota in stile:

Passaggio 5: Avvio degli stickies

Ora che abbiamo creato la nostra API, è ora di iniziare; possiamo farlo dal più vuoto copione tag nel nostro index.html file:

 STICKIES.open ();

Conclusione: il prodotto finale

Bene, abbiamo finito! Ecco il prodotto finale in azione:

Questo è tutto ciò che ho per oggi; come pensi di utilizzare l'archiviazione locale HTML5 per rendere più vivaci i tuoi progetti web? Fatemi sapere nei commenti!