Almacenamiento local de HTML5

Índice

Compatibilidad del encapsulador para este artículo
Función¿Compatible?
JavaScript
CSS
Almacenamiento local
Almacenamiento web SQL

Introducción

HTML5 ofrece cuatro tipos diferentes de almacenamiento de datos en una máquina de cliente local. Son:

  1. Almacenamiento local.
  2. Almacenamiento de sesión.
  3. Almacenamiento web SQL.
  4. Base de datos indexada.
El almacenamiento local y el almacenamiento web se suelen denominar almacenamiento web y son la interfaz de programación normal para páginas web. Suponen una mejora a las cookies. Tienen un tamaño limitado que varía entre los 5 MB y los 10 MB. No envían datos al servidor, sino que los almacenan en las máquinas de cliente local. El almacenamiento local es persistente y el almacenamiento de sesión es transitorio. Este artículo describe el almacenamiento local y el almacenamiento web SQL con código de ejemplo.

Demos

Here is a link to this article's demo.

-->

Información técnica

1. Almacenamiento local.

Parte 1: comprobar si el navegador admite almacenamiento local y, si es así, recuperar el objeto.
var db = getLocalStorage() || alert("Local Storage Not supported in this browser");

function getLocalStorage() {
    try {
        if(window.localStorage ) return window.localStorage;            
    }
    catch (e)
    {
        return undefined;
    }
}
Parte 2: establecer el par clave-valor mediante la función SetItem().

Es necesario recuperar la clave y los valores del editor de texto. Mediante la función db.setItem() se establecen los valores en el almacenamiento local. getlocal() es la función que recupera los valores del almacenamiento y se muestra cada vez que se carga la página. La función getLocal() se describe en la siguiente sección.



function setlocal() 
{            
    db.setItem(document.getElementById("txtKey").value, document.getElementById("txtValue").value);
    getlocal();           
 }
Parte 3: recuperar los valores del par clave-valor mediante la función getItem().

Es necesario recuperar la clave y los valores del editor de texto. Mediante la función db.setItem() se establecen los valores en el almacenamiento local. getlocal() es la función que recupera los valores del almacenamiento y se muestra cada vez que se carga la página. La función getLocal() se describe en la siguiente sección.



function getlocal()
 {            
    var res = document.getElementById("r");
    var pairs;            
    var i=0;
    res.innerHTML  = "";
    for (i=0; i<=db.length-1; i++) {
    key = db.key(i);             
    res.innerHTML += "<div>"+ "key: "+ key +" value: "+db.getItem(key)+"</div>";;
   }  
}

A continuación se muestra el código fuente completo para el almacenamiento local.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Local Storage Example</title>
    <script language="javascript" type="text/javascript">
    
     var db = getLocalStorage() || alert("Local Storage Not supported in this browser");
    
        function getLocalStorage() {
            try {
                if(window.localStorage ) return window.localStorage;            
            }
            catch (e)
            {
                return undefined;
            }
        }
        function setlocal() {
            
            db.setItem(document.getElementById("txtKey").value, document.getElementById("txtValue").value);
            getlocal();           
        }
        
        function ClearAll() {
            
            db.clear();
            getlocal();           
        }
        function getlocal() {
            
            var res = document.getElementById("r");
            var pairs;            
            var i=0;
            res.innerHTML  = "";
            for (i=0; i<=db.length-1; i++) {
            key = db.key(i);             
            res.innerHTML += "<div>"+ "key: "+ key +" value: "+db.getItem(key)+"</div>";;
           }        
          
        }       
        
    </script>
    <style>
        *{font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}
        fieldset{border-radius: 5px;padding:20px;}        
        .btn {
            border-radius: 5px;
            border:1px solid #000;
            background-color:#cccccc;
            padding:5px;
        }
        table{
            border: 1px; solid; #000;
        }
        
    </style>
</head>
<body onload="getlocal()">
<fieldset>
    <legend>Local Storage</legend>
    <input type="text" id="txtKey" /> : <input type="text" id="txtValue" /> <a id="setbtn" class="btn" href="javascript:void(0);"  onclick="setlocal();">Set!</a> <a id="clear" href="javascript:void(0);" class="btn" onclick="ClearAll();">Clear!</a>
    <div id="r"></div>    
</fieldset>
</body>
</html>

2: Almacenamiento web SQL.

El almacenamiento web SQL es una interfaz de una base de datos SQL relacional. El almacenamiento web SQL usa SQLite3 como motor de la base de datos. Es compatible con los navegadores Safari, Chrome y Opera. Lo primero que hay que hacer es comprobar si el navegador admite el almacenamiento web SQL. A continuación se muestra la función que lo comprueba y que recupera el objeto de almacenamiento.

function getopenDb() { 
    try {
        if (window.openDatabase) {                    
            return window.openDatabase;                    
        } else {
            alert('No HTML5 support');
            return undefined;
        }
    }
    catch (e) {
        alert(e);
        return undefined;
    }            
}

Parte 2: crear la tabla.

Cuando se haya recuperado el objeto de almacenamiento, habrá que crear una tabla. La siguiente función crea una tabla con la condición de que la tabla no exista. Llamamos a la función getopenDb() detallada anteriormente y, si se admite web SQL, llamamos al método db.transaction para iniciar la transacción de crear tabla. A continuación, llamamos a la función executeSql() para ejecutar una consulta de crear tabla. Esta es la función:

function createTable() {
    var openDB = getopenDb();
    if(!openDB)
    {                
        return;               
    }
    else
    {
        db = openDB('mydatabase', '1.0', 'my db', 10*1024*1024);
        db.transaction(function (t) { //t = transaction
        t.executeSql('CREATE TABLE IF NOT EXISTS myTable(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL DEFAULT "JohnDoe", age INT NOT NULL);', [], null, null);               
        
    });
    selRows();
    return db;
    }            
}

Parte 3: recuperar el objeto de almacenamiento al inicializar.

Al principio de la sección de scripts, llamamos al código que se indica a continuación. "db" es el objeto con el que se van a ejecutar los comandos.

var db = createTable();

Parte 4: insertar en el almacenamiento web SQL.

Es necesario llamar al método db.transaction para iniciar la transacción de insertar. A continuación, llamamos a la función executeSql() para ejecutar la consulta de insertar en la tabla. Esta es la función:

function insert() {
    if(!db)
    {                
        return;                
    }
    var name = document.getElementById("name").value;
    var age = document.getElementById("age").value;

    db.transaction(function (t) { //t = transaction
        t.executeSql("INSERT INTO myTable('name','age') values('" + name + "'," + age + ");", [], null, null);
        alert("Row Inserted!");
        selRows();
    });
}

Parte 5: seleccionar desde la tabla.

Es parecido a la anterior. La siguiente función realizará una selección desde la tabla y mostrará los resultados.

function selRows() {
    
    var q = "select * from myTable";
    
    db.transaction(function (t) { //t = transaction
        t.executeSql(q, null, function (t, data) {
            var html = "<table><tr><td>ID</td><td>Name</td><td>Age</td></tr>";
            for (var i = 0; i < data.rows.length; i++) {
                html += "<tr><td>" + data.rows.item(i).id + "</td><td>" + data.rows.item(i).name + "</td><td>" + data.rows.item(i).age + "</td></tr>";
            }
            html += "</table>";
            var el = document.getElementById("main");
            el.innerHTML = html;
        });
    });
}

A continuación se muestra el código fuente completo para el almacenamiento web SQL.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Web SQL Storage</title>
    <script language="javascript" type="text/javascript">   
        
        var db = createTable();
        
        function getopenDb() { 
            try {
                if (window.openDatabase) {                    
                    return window.openDatabase;                    
                } else {
                    alert('No HTML5 support');
                    return undefined;
                }
            }
            catch (e) {
                alert(e);
                return undefined;
            }            
        }
        function createTable() {
            var openDB = getopenDb();
            if(!openDB)
            {                
                return;               
            }
            else
            {
                db = openDB('mydatabase', '1.0', 'my db', 10*1024*1024);
                db.transaction(function (t) { //t = transaction
                t.executeSql('CREATE TABLE IF NOT EXISTS myTable(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL DEFAULT "JohnDoe", age INT NOT NULL);', [], null, null);               
                
            });
            selRows();
            return db;
            }            
        }
        function insert() {
            if(!db)
            {                
                return;                
            }
            var name = document.getElementById("name").value;
            var age = document.getElementById("age").value;
        
            db.transaction(function (t) { //t = transaction
                t.executeSql("INSERT INTO myTable('name','age') values('" + name + "'," + age + ");", [], null, null);
                alert("Row Inserted!");
                selRows();
            });
        }
        function selRows() {
            
            var q = "select * from myTable";
            
            db.transaction(function (t) { //t = transaction
                t.executeSql(q, null, function (t, data) {
                    var html = "<table><tr><td>ID</td><td>Name</td><td>Age</td></tr>";
                    for (var i = 0; i < data.rows.length; i++) {
                        html += "<tr><td>" + data.rows.item(i).id + "</td><td>" + data.rows.item(i).name + "</td><td>" + data.rows.item(i).age + "</td></tr>";
                    }
                    html += "</table>";
                    var el = document.getElementById("main");
                    el.innerHTML = html;
                });
            });
        }
        
        function clearDB() {
            if(!db)
            {                
                return;                
            }
            if(confirm('Clear the entire table?')) {
                db.transaction(function(t) {
                    t.executeSql('DELETE FROM myTable');
                });
                selRows();
            }
        }
        
    </script>
    <style>
        *{font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}
        fieldset{border-radius: 5px;padding:20px;}        
        .btn {
            border-radius: 5px;
            border:1px solid #000;
            background-color:#cccccc;
            padding:5px;
        }
        table{
            border: 1px; solid; #000;
        }
        
    </style>
</head>
<body>
<fieldset>
<legend>Web SQL Storage</legend>
<h4>Insert Rows</h4>
Name: <input type="text" id="name" /> Age: <input type="text" id="age" /><a href="javascript:void(0);" class="btn" onclick="insert();">Insert</a>
<a href="javascript:void(0);" class="btn" onclick="clearDB();">Clear</a>
</fieldset>
<div id="main"></div>
</body>
</html>
Para obtener información más completa sobre las optimizaciones del compilador, consulte nuestro Aviso de optimización.