Le stockage local HTML5 est comme les cookies sur les stéroïdes; C'est incroyablement simple à utiliser et pourtant si puissant. Dans ce tutoriel, je vais vous montrer comment créer une fonctionnalité de «notes autocollantes», qui permet à vos utilisateurs de prendre des notes persistantes tout en naviguant sur votre site..

Étape 1: le HTML

En raison de la nature dynamique de ce projet, il n’ya pas vraiment grand chose à coder comme un balisage sémantique ancien et régulier. Nous allons simplement simuler une page Web en rassemblant du contenu de remplissage:

           
  
 Exemple de titre d'article
  
Lorem ipsum dolor… 
   
       

Il y a quelques points importants à noter ici: nous incluons deux fichiers CSS: le premier est le style simple de la page, que nous avons appelé default.css. Ensuite, nous avons un fichier CSS spécial pour les styles relatifs à nos notes autocollantes; c'est appelé stickies.css, et comme vous pouvez le constater, il se trouve dans le dossier «Stickies». En bas, nous incluons quatre scripts:

• jQuery, à partir du CDN de Google
• JQuery UI, à partir du CDN de Google
• JSON2, de Douglas Crockford
• Notre propre stickies.js, qui habite dans le répertoire "stickies"

Ensuite, nous avons une balise de script vide que nous utiliserons pour démarrer le moteur un peu plus tard..

Et c'est tout pour HTML!

Étape 2: le CSS

Le contenu de default.css est incroyablement simple:

 corps marge: 0; rembourrage: 0; arrière-plan: #ccc; police: 14px / 1.5 "Helvetica Neue", Helvetica, Arial, san-serif;  article, pied de page, en-tête display: block;  article width: 880px; background: #fff; marge: auto; rembourrage: 40px;  en-tête de l'article color: # 474747; border-bottom: 1px solid # 474747 pied de page de l'article taille de la police: 90%; couleur: #ccc; 

C'est tout; maintenant, il y a le CSS de stickies.css soigner… mais nous n'avons pas encore ce balisage. Commençons donc avec JavaScript, et lorsque cela sera fait, nous examinerons le code CSS pour les notes autocollantes..

Étape 3: le JavaScript

Voici le squelette de notre application JavaScript:

 var STICKIES = (fonction () var initStickies = fonction () , openStickies = fonction () , createSticky = fonction (données) , deleteSticky = fonction (id) , saveSticky = fonction ()  , markUnsaved = function () ; return open: openStickies, init: initStickies; ());

Nous avons quelques techniques intéressantes en cours ici. La première est la fonction à auto-implication: on pourrait penser que nous affectons une fonction à la variable STICKIES, mais si vous regardez de près la fin de la fonction, vous verrez que nous l'exécutons tout de suite. En guise d'indice - pour nous rappeler que cette fonction n'est pas normale - nous encapsulons l'intégralité de la fonction entre parenthèses. Alors, STICKIES n'est pas une fonction, c'est la valeur renvoyée par cette fonction, qui est un objet, dans ce cas.

Cela nous amène à la technique suivante: la fermeture. Notez que sur les six fonctions que nous créons, seules deux d'entre elles sont exposées à l'utilisateur (en réalité, une seule est nécessaire pour l'utilisation que nous planifions. Si nous voulions créer un support pour la création de notes sur votre site Web, nous pourrions exposer les créerSticky et deleteSticky). Même si la fonction à implication automatique finit de s'exécuter avant même d'utiliser les méthodes, nous pourrons utiliser les autres fonctions que nous avons définies..

Bon, passons au contenu de ces fonctions.

initStickies

Nous allons commencer par regarder le initStickies une fonction:

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

C'est assez simple. Nous utiliserons assez souvent jQuery pour créer des éléments, et nous utilisons une syntaxe spéciale dans la v. 1.4: cela consiste à transmettre un littéral d'objet avec les spécifications de l'élément en tant que second paramètre à la fonction jQuery. Ici, nous créons un bouton pour créer une nouvelle note. Cela signifie que nous avons besoin d'un nouveau div; nous mettons le texte à "+" et lui donnons une classe "add-sticky"; alors, nous définissons un gestionnaire de clic pour appeler le créerSticky méthode (il est important d'appeler créerSticky de l'intérieur d'une fonction et ne pas appeler directement le gestionnaire de clics vers créerSticky; Ceci est dû au fait créerSticky peut prendre un seul paramètre, et nous ne voulons pas que ce soit l’objet événement). Enfin, nous ajoutons ceci div au corps. Nous finissons par mettre initStickies à nul; oui, nous nous débarrassons essentiellement de la fonction que nous exécutons. Cela nous assure que cette fonction ne sera exécutée qu'une seule fois; nous ne voulons pas que l'utilisateur de notre API ajoute par inadvertance plusieurs boutons «ajouter une note» à la page.

openStickies

Passons à la méthode suivante, openStickies:

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

Nous commençons par courir initStickies… Mais qu'en est-il de la syntaxe sophistiquée? Eh bien, vous êtes probablement familier avec && opérateur: l'opérateur booléen AND. Vous l'utiliseriez généralement pour vérifier plusieurs conditions dans une instruction if. Voici ce qu'il fait réellement: il évalue la première expression et, si cela s'avère vrai, il évaluera ensuite la deuxième expression. Dans ce cas, si initStickies n'a pas encore été défini sur null, nous allons exécuter la fonction. Cela évite l’erreur qui résulterait d’essayer d’exécuter une variable nulle en tant que fonction.

Ensuite, nous passons en boucle sur chaque élément de LocalStorage. Voici ce que nous faisons dans cette boucle (de l'intérieur vers l'extérieur):

• localStorage.key () est une excellente fonction qui renvoie le nom de clé de stockage local valeur; il faut un nombre comme paramètre. C'est un excellent moyen de passer en revue chaque élément de stockage local.
• Une fois que nous avons la clé d’un article stocké, nous pouvons la transmettre à localStorage.getItem () pour obtenir sa valeur.
• Ensuite, nous passons cette valeur à JSON.parse (); cela vient de la bibliothèque de Crockford. Parce que nous stockons quelques valeurs pour chaque note, nous utilisons JSON.stringify () à l'autre extrémité pour transformer un objet en une chaîne JSON, que nous stockons. Ici, nous le convertissons d'une chaîne en un objet.
• Enfin, nous passons cet objet à createSticky (), ce qui le retourne dans une note collante.

créerSticky

Maintenant, regardons ça créerSticky méthode.

 createSticky = fonction createSticky (données) données = données || id: + new Date (), en haut: "40px", à gauche: "40px", texte: "Remarque ici" return $ ("
", " class ":" sticky ", 'id': data.id) .prepend ($ ("
", " class ":" sticky-header ") .append ($ ("", " class ":" status-sticky ", cliquez sur: saveSticky)) .append ($ ("", " class ":" close-sticky ", texte:" corbeille ", cliquez sur: function () deleteSticky ($ (this) .parents (". sticky "). attr (" id ")) ))) .append ($ ("
", html: data.text, contentEditable: true," class ":" sticky-content ", appuyez sur la touche: markUnsaved)) .draggable (handle:" div.sticky-header ", pile:" .sticky ", start: markUnsaved, stop: saveSticky) .css (position: "absolute", "top": data.top, "left": data.left) .focusout (saveSticky) .appendTo (document.body);,

Oui, c'est long, mais ça ne va pas être trop difficile. Tout d'abord, notez que cette fonction prend un objet de données; comme nous venons de le voir openStickies, nous transmettons les données stockées à cette fonction. Cependant, si nous ne transmettons aucune donnée (c’est-à-dire si nous créons une nouvelle note), nous allons créer l’objet note par défaut. Comme toutes les notes doivent être créées à un moment donné, toutes les notes commenceront par cette configuration. Notez que pour l'identifiant de note, nous utilisons +nouvelle date (); cet opérateur unaire plus préfixé convertit la date que nous obtenons de la nouvelle date en un nombre, de sorte que cette déclaration génère un nombre représentant le nombre de millisecondes depuis le 1er janvier 1970. Évidemment, ce nombre changera continuellement, c'est donc un excellent moyen de identifier de manière unique chaque note.

Le reste de la fonction est une longue chaîne de méthodes jQuery chaînées. Avant de commencer, notez que nous renvoyons le résultat. Si nous exposions cette méthode aux développeurs utilisant notre API mirco, elle renverrait une référence à l'élément div collant.

Alors, voici ce qui se passe:

• Tout d'abord, nous créons le div c'est la coquille du pense-bête. En utilisant cette syntaxe utile de jQuery 1.4, nous lui attribuons une classe de «collants» et l'identifiant de l'objet de données..

• Ensuite, nous ajoutons un div à celui-là; ce div obtient une classe "collante-en-tête". div.sticky-header puis obtient deux étendues ajoutées à elle. La première, span.sticky-status, obtient un gestionnaire de clics qui appelle le saveSticky une fonction. Cependant, il s’agit en fait d’une fonctionnalité cachée: cette plage affichera l’état du sticky: sauvegardé ou non. Le sticky pourra sauvegarder ses données de plusieurs façons. stockage local; il est possible que l'utilisateur pense que cliquer sur «Non enregistré» enregistre la note. Nous lui fournirons donc cette fonctionnalité. La deuxième travée, span.close-collant, sera le bouton de suppression: lorsque l'utilisateur clique dessus, nous retirons le post-it de stockage local, via le deleteSticky méthode. Nous passons cette méthode l'identifiant de la note.

• Ensuite, nous ajoutons une autre div à la principale div.sticky; remarquons que nous avons mis la html propriété à data.text; lorsque nous sauvegardons le texte de la note, nous utilisons celui de jQuery html () méthode, car utiliser texte() se débarrasse des sauts de ligne. Nous avons également mis contentEditable: true sur cette div, parce que c'est le contenu de la note. En tant que tel, il obtient également la classe contenu collant. Enfin, quand une touche est enfoncée sur ce div (ce qui signifie que l'utilisateur change le contenu), nous voulons le marquer comme non sauvegardé, donc nous appellerons cette fonction (que nous allons créer bientôt).

• Nous utilisons maintenant la fonctionnalité déplaçable de l'interface utilisateur de jQuery pour rendre notre pense-bête déplaçable. Dans notre objet paramètre, nous utilisons le manipuler propriété de rendre nos notes uniquement mobiles à partir de la barre d’entête. le empiler property est un sélecteur permettant aux éléments déplaçables de «s'empiler»; en réglant ceci, la note actuellement glissée viendra toujours en haut. Enfin, lorsque nous commençons à faire glisser la note, nous voulons la marquer comme «non sauvegardée» (car nous devons également enregistrer ses coordonnées), et lorsque nous cesserons de faire glisser cette note, nous la sauverons..

• Ensuite, nous définissons des styles pour notre div.sticky; nous le positionnons absolument, puis définissons ses valeurs supérieure et gauche sur celles de l'objet de données. De cette façon, la note conservera sa position ainsi que son contenu lors de l'actualisation de la page..

• Enfin, nous allons définir un gestionnaire d'événements pour quand nous focusout du collant (essentiellement, cliquez à l'extérieur après avoir cliqué à l'intérieur): nous voulons enregistrer le collant. Enfin, nous allons l'ajouter au corps. Pour référence, voici la structure HTML que nous aurions dû générer:

 
  poubelle 
 
 Notez ici 
 

Et c'est notre créerSticky une fonction.

deleteSticky

Maintenant nous avons le deleteSticky une fonction; c'est vraiment simple:

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

Comme vous vous en souvenez, le deleteSticky fonction prend l'identifiant d'une note en tant que paramètre. localStorage.removeItem () est la méthode de l'heure: nous transmettons la clé à une valeur stockée localement pour supprimer cette paire clé-valeur (notez que lorsque nous stockons les données de note, nous ajoutons un préfixe «à l'id»). Ensuite, nous trouvons l’élément avec l’id donné, le fondons puis le supprimons. Note supprimée!

saveSticky

L'avant-dernier pourrait être la méthode la plus importante aujourd'hui: saveSticky: c'est la colle qui fait que tout fonctionne.

 saveSticky = function saveSticky () var que = $ (this), collant = (that.hasClass ("statut collant") || qui.hasClass ("contenu collant"))? that.parents ('div.sticky'): cela, obj = id: sticky.attr ("id"), en haut: sticky.css ("en haut"), à gauche: sticky.css ("à gauche"), texte : sticky.children (". sticky-content"). html () localStorage.setItem ("sticky-" + obj.id, JSON.stringify (obj)); sticky.find (". sticky-status"). text ("sauvegardé"); ,

La première ligne est un peu de résolution: nous pouvons appeler cette fonction à partir de trois éléments différents. D'abord, nous allons “jQuerify” ce dans cette; ensuite, si l'élément a les classes «sticky-status» ou «sticky-content», nous obtiendrons le parent div.sticky; s'il n'a pas l'une de ces classes, alors il est div.sticky lui-même, nous allons donc utiliser.

Ensuite, nous devons obtenir les valeurs que nous voulons stocker. Comme vous pouvez le voir, nous obtenons l'id, décalé en haut et à gauche, et le code HTML de l'enfant .contenu collant; rappelez-vous, nous utilisons html () au lieu de texte() parce que nous voulons garder les sauts de ligne. Ensuite, nous utilisons localStorage.setItem pour stocker les données. Rappelez-vous qu'il faut deux paramètres: la clé et la valeur à stocker. Puisque stockage local ne stocke que des chaînes, nous utilisons JSON.stringify () convertir l'objet en chaîne.

Enfin, changez l’état collant en «sauvegardé».

markUnsaved

Nous avons une dernière fonction, qui est juste une fonction d'assistance:

 markUnsaved = function markUnsaved () var que = $ (ceci), collant = que.laClasse ("contenu-collant")? ça.parents ("div.sticky"): ça; sticky.find (". sticky-status"). text ("non sauvegardé"); 

Encore une fois, nous devons commencer par résoudre la référence à div.sticky; une fois que nous le faisons, nous pouvons simplement trouver l’étendue du statut et définir le texte sur «non sauvegardé».

Croyez-le ou non, c'est tout le JavaScript.

Étape 4: Le CSS, revisité

Maintenant que nous connaissons notre balisage de notes autocollantes, nous pouvons l'appeler. C'est assez simple. mais regardez, et je ferai quelques commentaires à la fin:

 : focus contour: 0;  .add-sticky cursor: default; position: absolue; en haut: 1px; à gauche: 1px; taille de police: 200%; arrière-plan: # 000; couleur: #fff; bordure: 2px solide #fff; border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; text-align: center; hauteur de ligne: 25px; largeur: 30px; hauteur: 30px;  .add-sticky: survoler background: # 474747;  .sticky width: 300px; arrière-plan: #fdfdbe; boîte-ombre: 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; bordure gauche: 3px double rgba (238, 150, 122, 0,75); marge gauche: 30px; rembourrage: 5px;  .sticky-header padding: 5px; arrière-plan: # f3f3f3; border-bottom: 2px solid #fefefe; boîte-ombre: 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; rembourrage: 5px;  .close-sticky background: # 474747; Flotter à droite; curseur: par défaut; couleur: #ececec; rembourrage: 1px 5px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; 

Il y a quelques points d'intérêt ici:

• Certains navigateurs mettent en évidence les éléments avec contenteditable = true quand vous éditez le contenu. Nous ne voulons pas cela, alors nous nous en débarrassons avec notre :concentrer déclaration.
• Le bouton «Ajouter un sticky» est placé dans le coin supérieur gauche; il ressemble vaguement à «Ajouter un tableau de bord» dans Mac OS X.
• Nous utilisons les propriétés CSS3 border-radius et box-shadow (ainsi que leurs incarnations appropriées du préfixe du fournisseur)..
• Nous utilisons aussi rgba () pour nos couleurs d'ombre. Il faut quatre paramètres: les couleurs rouge, cupidité et bleu et la valeur alpha (transparence).

Autre que cela, c'est juste votre CSS standard. Voici à quoi devrait ressembler une note stylisée:

Étape 5: Démarrer les collants

Maintenant que nous avons créé notre API, il est temps de la lancer. nous pouvons le faire du vide supplémentaire scénario tag dans notre index.html fichier:

 STICKIES.open ();

Conclusion: le produit final

Eh bien, nous avons terminé! Voici le produit final en action:

C'est tout ce que j'ai pour aujourd'hui; Comment envisagez-vous d'utiliser le stockage local HTML5 pour pimenter vos projets Web? Faites-moi savoir dans les commentaires!