Navigation

Contactez-nous

Kitpages
17 rue de la Frise
38000 Grenoble
tel : 04 58 00 33 81

Par Philippe Le Van (twitter accountplv) Dernière mise à jour : 30 January 2013

Bloc-note HTML5, localStorage

Utilisez ce bloc note comme bon vous semble. Son contenu est enregistré en temps réel sur votre navigateur (en utilisant le localStorage HTML5). Vos contenus ne sont envoyés à personne (et notamment pas à Kitpages).

Caractéristiques

Ce bloc note a les caractéristiques suivantes :

  • Les contenus ne sont enregistrés que sur votre navigateur (localStorage)
  • Les contenus sont conservés à l'infini sur votre navigateur
  • Si vous ouvrez 2 onglets avec la même page, les contenus sont synchronisés entre les 2 onglets (synchronisé est un bien grand mot ici... disons que dès que le textarea prend le focus, il récupère la valeur du localStorage)

Comment ça marche ?

C'est un exemple basique d'utilisation du localstorage.

// code HTML associé : <textarea id="notepad" style="width: 600px; height: 400px;"></textarea>

// on récupère le textarea
var pad = $("#notepad");

// on lui donne le focus quand on arrive sur la page
pad.focus();

// on récupère le contenu du localstorage en arrivant sur la page
pad.val(localStorage.notepadContent);

// à chaque modif du textarea on enregistre le contenu du
// textarea dans le localstorage
pad.bind("input", function() {
    // hack : le setTimeout 0 permet de récupérer la valeur du textarea
    // après l'exécution du comportement par défaut de l'event keypress
    setTimeout(function() {localStorage.notepadContent=pad.val();}, 0);
});
// comme au dessus, mais pour IE...
pad.bind("propertychange", function() {
    setTimeout(function() {localStorage.notepadContent=pad.val();}, 0);
});

// dès que le textarea récupère le focus, on met le met à jour depuis
// le local storage. Du coup, si on a 2 fenêtre ouvertes avec le notepad
// elles restent synchronisées
pad.focus(function() {
    pad.val(localStorage.notepadContent);
});

Conclusion

N'hésitez pas à m'envoyer vos remarques dans les commentaires !

Commentaires

Ajouter un commentaire
bloc notes en ligne
Je veux partager cette très bonne
 <a href="http://www.guinbox.com/note" title="free online notepad">free online notepad</a>
Tout le monde peut enregistrer ses notes et y accéder de n'importe où

Je souhaite que cette aide