Enregistrement local de fichiers à l’aide du stockage Web

Cette rubrique reprend là où la rubrique Lecture des fichiers locaux s’était arrêtée, et montre comment enregistrer localement des fichiers non volumineux en utilisant le stockage Web.

Le stockage Web est l’une des méthodes les plus simples permettant d’enregistrer localement des fichiers de taille modérée. Le stockage Web s’apparente aux cookies classiques, mais par rapport à ces derniers, il offre généralement une plus grande allocation de stockage. Par exemple, Windows Internet Explorer 10 alloue 10 Mo par domaine au stockage local de divers éléments (tels que chaînes, fichiers, objets JavaScript, etc.). Les exemples de code suivants expliquent comment enregistrer des fichiers localement en utilisant cette technique.

Remarque  Les exemples de code suivants nécessitent un navigateur qui prend en charge une API de fichier et le stockage Web, comme Internet Explorer 10 ou version ultérieure.

Application de dessin Canvas

Pour rendre les exemples de code ci-après plus réalistes, une application de dessin simple HTML5 Canvas a été intégrée à l’exemple 1. En effet, ce type d’application nécessite l’enregistrement local des fichiers. Cet exemple sera ensuite complété pour enregistrer localement le dessin d’un utilisateur.

Exemple 1


<!DOCTYPE html>
<html>
  <head>
    <title>Simple Drawing App</title>
    <meta http-equiv="X-UA-Compatible" content="IE=10">
    <style>
      html { 
       -ms-touch-action: none;
       text-align: center; /* Center all contents of the page. */
      }
    </style>
  </head>
  <body>
    <h1>Simple Drawing App</h1>
    <h3>Example 1</h3>
    <canvas id="drawSurface" width="500" height="500" style="border:1px solid black;"></canvas> <!-- The canvas element can only be manipulated via JavaScript -->
    <div>
      <button id="erase">Erase</button>
    </div>
    <script>
      if (!document.createElement('canvas').getContext) {
        document.querySelector('body').innerHTML = "<h1>Canvas is not supported by this browser.</h1><p>To use this application, upgrade your browser to the latest version.</p>";
      }
      else {
        window.addEventListener('load', init, false); // Safety first.
  
        function init() {
          var canvas = document.getElementById('drawSurface'); // A static variable, due to the fact that one or more local functions access it.
          var context = canvas.getContext('2d'); // A static variable, due to the fact that one or more local functions access it.
  
          context.fillStyle = "purple";
  
          if (window.navigator.msPointerEnabled) {
            canvas.addEventListener('MSPointerMove', paintCanvas, false);
          }
          else {
            canvas.addEventListener('mousemove', paintCanvas, false);
          }
  
          document.getElementById('erase').addEventListener('click', eraseCanvas, false);
  
          function paintCanvas(event) { // The "event" object contains the position of the pointer/mouse.
            context.fillRect(event.offsetX, event.offsetY, 4, 4); // Draw a 4x4 rectangle at the given coordinates (relative to the canvas box). As of this writing, not all browsers support offsetX and offsetY.
          } // paintCanvas
  
          function eraseCanvas() {
            context.clearRect(0, 0, context.canvas.width, context.canvas.height);
          } // eraseCanvas
        } // init      
      } // else
    </script>
  </body>
</html>

Pour utiliser cette application très simple, déplacez votre souris au-dessus de la zone de dessin carrée. Pour effacer un dessin, il vous suffit de cliquer sur le bouton Effacer.

Le point le plus délicat de ce code est probablement l’utilisation des deux variables « statiques » canvas et context, qui sont déclarées en tant que variables locales dans init. Les fonctions locales (paintCanvas et eraseCanvas) ayant recours à ces variables, celles-ci ne sont accessibles qu’au terme de l’exécution de init. Cette approche évite d’encombrer l’espace de noms global. Notez que cette application fonctionne également avec des appareils tactiles, tels qu’une tablette.

Enregistrement de fichiers à l’aide du stockage Web

Comme indiqué précédemment, les navigateurs récents (y compris Windows Internet Explorer 9 ou version ultérieure) prennent en charge le stockage Web. Il existe deux types de stockage Web : le stockage local et le stockage de session. Comme son nom l’indique, le stockage de session n’est conservé que pendant la session de navigateur actuelle. En revanche, le stockage local est conservé indéfiniment.

Nous utilisons le stockage local pour enregistrer un dessin d’utilisateur. Cela se révèle relativement simple, comme le montre l’exemple suivant :

Exemple 2


<!DOCTYPE html>
<html>
  <head>
    <title>Simple Drawing App</title>
    <meta http-equiv="X-UA-Compatible" content="IE=10">
    <style>
      html { 
       -ms-touch-action: none;
       text-align: center; /* Center all contents of the page. */
      }
    </style>
  </head>
  <body id="bodyElement"> <!-- This ID is used in the following script block for feature detection. -->
    <h1>Simple Drawing App</h1>
    <h3>Example 2</h3>
    <canvas id="drawSurface" width="500" height="500" style="border:1px solid black;"></canvas> <!-- The canvas element can only be manipulated via JavaScript -->
    <div>
      <button id="erase">Erase</button>
      <button id="save">Save</button>
      <button id="load">Load</button>
    </div>
    <script>
      function requiredFeaturesAvailable() {
        return (
                 !!window.addEventListener && // Use the double negative "!!" to force the object to a Boolean value.
                 !!document.createElement('canvas').getContext &&
                 !!window.localStorage
               );
      } // requiredFeaturesAvailable
      
      if ( !requiredFeaturesAvailable() ) {
        document.getElementById('bodyElement').innerHTML = "<h2>Required features are not supported by this browser.</h2><p>To use this application, upgrade your browser to the latest version.</p>";
      }
      else {
        window.addEventListener('load', init, false); // Safety first.
  
        function init() {
          var canvas = document.getElementById('drawSurface'); // A static variable, due to the fact that one or more local functions access it.
          var context = canvas.getContext('2d'); // A static variable, due to the fact that one or more local functions access it.
  
          context.fillStyle = "purple";
  
          if (window.navigator.msPointerEnabled) {
            canvas.addEventListener('MSPointerMove', paintCanvas, false);
          }
          else {
            canvas.addEventListener('mousemove', paintCanvas, false);
          }
  
          document.getElementById('erase').addEventListener('click', eraseCanvas, false);
          document.getElementById('save').addEventListener('click', saveCanvas, false);
          document.getElementById('load').addEventListener('click', loadCanvas, false);
  
          function paintCanvas(event) { // The "event" object contains the position of the pointer/mouse.
            context.fillRect(event.offsetX, event.offsetY, 4, 4); // Draw a 4x4 rectangle at the given coordinates (relative to the canvas box). As of this writing, not all browsers support offsetX and offsetY.
          } // paintCanvas
  
          function saveCanvas() {
            window.localStorage.canvasImage = canvas.toDataURL(); // Save the user's drawing to persistent local storage.
          } // saveCanvas
  
          function eraseCanvas() {
            context.clearRect(0, 0, context.canvas.width, context.canvas.height);
          } // eraseCanvas
  
          function loadCanvas() {
            var img = new Image(); // The canvas drawImage() method expects an image object.
            
            img.src = window.localStorage.canvasImage; // Retrieve the last saved artistic achievement from persistent local storage.
            img.onload = function() { // Only render the saved drawing when the image object has fully loaded the drawing into memory.
              context.drawImage(img, 0, 0); // Draw the image starting at canvas coordinate (0, 0) - the upper left-hand corner of the canvas.
            } // onload
          } // loadCanvas
        } // init
      } // else
    </script>
  </body>
</html>

L’exemple 2 reprend essentiellement l’exemple 1, avec les ajouts suivants :

  • Nous commençons par rechercher toutes les fonctionnalités requises avec la fonction requiredFeaturesAvailable. Par précaution, nous ajoutons une double négation aux objets qui nous intéressent pour les forcer à prendre une valeur booléenne.

  • Ensuite, nous ajoutons deux nouveaux gestionnaires d’événements, saveCanvas et eraseCanvas, qui sont respectivement appelés lorsque l’utilisateur clique sur les boutons Enregistrer et Charger. La fonction saveCanvas se compose d’une seule ligne de code :

    
    window.localStorage.canvasImage = canvas.toDataURL();
    
    

    Cette ligne convertit le dessin de l’utilisateur dans une forme qui peut être affichée sur une page Web, puis l’enregistre dans un stockage local avec le nom de propriété personnalisé canvasImage (ce nom peut être n’importe quel nom valide de votre choix).

  • Lorsque l’utilisateur clique sur le bouton Charger, l’image enregistrée est récupérée et affichée dans la zone de dessin de cette manière : étant donné que la méthode canvas.drawImage attend une image, nous créons d’abord un nouvel objet image générique, nous attribuons son attribut src au dessin enregistré (en règle générale, l’attribut désigne un chemin HTTP pointant vers un fichier graphique) et, lorsque les objets image nous signalent que sa propriété src est intégralement chargée, nous transférons l’image vers l’élément zone de dessin en appelant canvas.drawImage.

Pour vérifier que le dessin est réellement enregistré de manière persistante, créez un dessin, cliquez sur Enregistrer, redémarrez votre ordinateur, réexécutez l’exemple 2, puis (en veillant à ne pas dessiner accidentellement dans la zone de dessin vide), cliquez sur Charger ; le dessin enregistré apparaît « comme par magie ».

Notez que le stockage Web permet de stocker uniquement des paires valeur/clé au format chaîne. Vous avez néanmoins la possibilité de stocker des objets JavaScript bruts en utilisant JSON.stringify(). L’exemple suivant illustre cette procédure :

Exemple 3


<!DOCTYPE html>
<html>
  <head>
    <title>Storing/Retrieving JavaScript Objects Using HTML5 Local Storage</title>
    <meta http-equiv="X-UA-Compatible" content="IE=10">    
  </head>
  <body>
    <h1>Storing Objects using Local Storage</h1>
    <h3>Example 3</h3>
    <p></p>
    <script>
      if (!!window.localStorage) {
        var person = { firstName: 'John', lastName: 'Anderson' }; // Create a JavaScript object literal.

        window.localStorage.person = JSON.stringify(person); // Convert the object to a string.
        person = JSON.parse(window.localStorage.person); // Convert the object string back to a JavaScript object.

        document.querySelector('p').innerHTML = "<strong>First Name:</strong> " + person.firstName + "<br /><strong>Last Name:</strong> " + person.lastName;
      }
      else {
        document.querySelector('body').innerHTML = "<h2>Local storage is not supported by this browser.</h2><p>To use this application, upgrade your browser to the latest version.</p>";
      }
    </script>
  </body>
</html>

Exercices

Il est évident que l’application de dessin ci-dessus a été simplifiée au maximum. Nous vous recommandons, au minimum, d’améliorer cette application de sorte que l’utilisateur soit obligé de cliquer dans la zone de dessin avant de commencer le dessin, et que les rectangles « bloc » (sensibles à la vitesse de la souris ou du pointeur) soient remplacés par des lignes de flux contiguës.

Rubriques connexes

Brève présentation de JSON
Comment gérer des fichiers locaux
Exemples et didacticiels Internet Explorer 10
Présentation du stockage Web
Lecture des fichiers locaux

 

 

Afficher:
© 2014 Microsoft