23 de julio de 2012

Cómo guardar datos localmente en HTML

Según observo, actualmente (julio 2012), las posibles APIs para almacenar localmente datos en HTML son las siguientes:
  1. Storage
  2. SQL Database
  3. IndexedDB
    • Lista de pares de valores, con índices para mejorar desempeño.
    • Me parece que todavía no está implementada entre varios navegadores.
    • Especificación:
Un ejemplo del uso del Storage (con el objeto LocalStorage, que mantiene los valores incluso cuando se cierra el navegador) es el siguiente:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>LocalStorage Example</title>
  </head>
  <body>
    <h1>Storage Example</h1>

    <script type="text/javascript" charset="utf-8">
      if(typeof(Storage)!="undefined" && typeof(localStorage)!="undefined") {

        var value1 = window.localStorage.getItem("key1");
        var value2 = window.localStorage.getItem("key2");
        alert("value1="+value1);
        alert("value2="+value2);
        window.localStorage.setItem("key1", "aaa");
        window.localStorage.setItem("key2", "bbb");
        value1 = window.localStorage.getItem("key1");
        value2 = window.localStorage.getItem("key2");
        alert("value1="+value1);
        alert("value2="+value2);

      }
    </script>

  </body>
</html>

Este ejemplo lo probé en Apple Safari 5.1.2, Mozilla Firefox 13.0.1, y Google Chrome 20.0.1132, todos en Microsoft Windows 7. Y no, no corre en Internet Explorer 8.0.7601 (no cuento con Windows 9 para probarlo ahí.)