HTML5n - Local Storage

Indice

Compatibilità dell'incapsulatore per questo articolo
FunzionalitàSupportata?
JavaScript
CSS
Local Storage
Web SQL Storage

Introduzione

HTML5 fornisce quattro diversi tipi di archiviazione dei dati su un computer client locale, tra cui:

  1. Local Storage.
  2. Session Storage.
  3. Web SQL Storage.
  4. Indexed DB.
Le tecnologie Local Storage e Web Storage vengono in genere denominate Web Storage e rappresentano una comune interfaccia di programmazione per le pagine Web. Queste funzionalità costituiscono un miglioramento dei cookie e sono di dimensioni limitate, che variano da 5 a 10 MB. Non inviano i dati al server, ma archiviano i dati sui computer client locali. Local Storage è un'archiviazione persistente, mentre Session Storage offre un'archiviazione temporanea. Nel presente articolo viene fornita una descrizione delle tecnologie Local Storage e Web SQL Storage con codice di esempio.

Demos

Here is a link to this article's demo.

-->

Informazioni tecniche

1. Local Storage.

Parte 1: verificare se la funzionalità Local Storage è supportata dal browser e ottenere l'oggetto, se supportato.
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: impostare la coppia chiave-valore utilizzando la funzione SetItem().

Ottenere la chiave e i valori dall'editor di testo e, utilizzando la funzione db.setItem(), impostare i valori in Local Storage. getlocal() è la funzione che recupera i valori dall'archivio e li visualizza ogni volta che viene caricata la pagina. La funzione getLocal() è descritta nella sezione successiva.



function setlocal() 
{            
    db.setItem(document.getElementById("txtKey").value, document.getElementById("txtValue").value);
    getlocal();           
 }
Parte 3: recuperare i valori della coppia chiave-valore utilizzando la funzione getItem().

Ottenere la chiave e i valori dall'editor di testo e, utilizzando la funzione db.setItem(), impostare i valori in Local Storage. getlocal() è la funzione che recupera i valori dall'archivio e li visualizza ogni volta che viene caricata la pagina. La funzione getLocal() è descritta nella sezione successiva.



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>";;
   }  
}

Di seguito è riportato il codice sorgente completo per Local Storage.

<!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: Web SQL Storage.

Web SQL Storage è un'interfaccia di un database relazionale SQL che utilizza SQLite3 come motore di database. È supportata nei browser Safari, Chrome e Opera. Il primo passaggio da eseguire consiste nel verificare se il browser supporta Web SQL Storage. Di seguito è riportata la funzione che esegue questa verifica e ottiene l'oggetto storage.


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

Parte 2: creazione della tabella.

Una volta ottenuto l'oggetto storage, si deve creare una tabella. La funzione riportata di seguito crea una tabella, nel caso in cui ancora non esista. Richiamare la funzione get getopenDb() descritta sopra e, se la funzionalità Web SQL è supportata, richiamare il metodo db.transaction per avviare la transazione per la creazione della tabella. Richiamare quindi la funzione executeSql() per eseguire una query per la creazione della tabella. La funzione è illustrata di seguito.


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: recupero dell'oggetto storage in fase di inizializzazione.

Nella parte iniziale della sezione degli script viene richiamato il codice riportato di seguito. "db" rappresenta l'oggetto che verrà utilizzato per eseguire i comandi.


var db = createTable();

Parte 4: inserimento in Web SQL Storage.

È necessario chiamare il metodo db.transaction per avviare la transazione "Insert" e la funzione executeSql() per eseguire la query per l'inserimento nella tabella. La funzione è illustrata di seguito.


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: selezione dalla tabella.

Questa procedura è simile alla procedura descritta sopra. La funzione riportata di seguito selezionerà i dati desiderati dal database e visualizzerà i risultati.


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;
        });
    });
}

Di seguito è illustrato il codice sorgente completo per Web SQL Storage.

<!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>
Per informazioni complete sulle ottimizzazioni del compilatore, consultare l'Avviso sull'ottimizzazione