Cet exemple utilise FileSaver.js qui est un formidable.gestionnaire de sauvegarde.de fichier en local. Il est simple d'emploi et permet de créer des fichiers lourds (je suis monté à 1 MO sans problème) auxquels on peut donner un nom. Par contre l'enregistrement se fera toujours dans le dossier 'Downloads' (Téléchargements).

Sauvegarder en local (dans un fichier .json) les données d'une base IndexedDB

La grille est simplement là pour refléter le contenu de l'ObjectStore, si elle est vide, c'est que probablement vous n'avez pas créé de base de données IndexedDB, dans ce cas créez la , et rechargez la page.

HTML
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>JSON IDB Demo</title>
        <link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui-1.5.rc1.min.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui-1.5.rc1.min.js"></script>
        <script src="FileSaver.js"></script>
        <script src="saveIDBToJSON.js"></script>
    </head>
    <body>
        <div id="grid" style="width: 100%; height: 360px; margin-bottom:20px;"></div>
        <button class="w2ui-btn" onclick="saveIDBToJSON()">Sauvegarder la BD</button>
        <script type="text/javascript">
            $(function () {
                $('#grid').w2grid({
                    name: 'gridName',
                    show: {
                        header: true,
                        lineNumbers: true,
                        footer: true
                    },
                    sortData: [ { field: 'recid', direction: 'asc' } ],
                    columns: [
                        { field: 'recid', caption: 'recID', size: '60px', sortable: true },
                        { field: 'fname', caption: 'First Name', size: '30%' },
                        { field: 'lname', caption: 'Last Name', size: '30%', sortable: true },
                        { field: 'email', caption: 'Email', size: '40%' },
                        { field: 'sdate', caption: 'Dates', size: '90px', attr: "align=center" }
                    ],
                });
                w2ui['gridName'].header = 'Base: WebBlogiciel - Objectstore: people';
                openIndexedDB("WebBlogiciel", 1, "", "gridName");
            });
        </script>
    </body>
</html>
Javascript
var db;
function openIndexedDB(DBName, DBVersion, dataToStore, gridName)
{
    /*Ouverture ou création de la base de données 'WebBlogiciel'*/
    var openRequest = indexedDB.open(DBName, DBVersion);
    openRequest.onupgradeneeded = function(e)
    {
        /*Si elle n'existe pas ou si le numéro de version passé en second paramètre est supérieur à celui existant,*/
        /*l'évenement 'onupgradeneeded' est déclenché.sinon la base de données est simplement ouverte.*/
        console.log("Upgrading...");
        var thisDB = e.target.result;

        if( !thisDB.objectStoreNames.contains("people") )
        {
            var objectStore = thisDB.createObjectStore("people", { autoIncrement: true });
            console.log("Created ObjectStore : people");
        }
    }

    openRequest.onsuccess = function(e)
    {
        console.log("DB '" + openRequest.result.name + "' Version: " + openRequest.result.version + " Opened Successfully");
        db = e.target.result;

        var addRequest;
        var transaction;
        var objectStore;

        if( dataToStore )
        {
            transaction = db.transaction("people","readwrite");
            objectStore = transaction.objectStore("people");
            objectStore.clear();

            transaction.oncomplete = function(event)
            {
                transaction = db.transaction("people", "readwrite");
                objectStore = transaction.objectStore("people");

                while(dataToStore.length)
                {
                    addRequest = objectStore.add(dataToStore[0]).onsuccess = function (event)
                    {
                        console.log("items ajoutés dans l'objectStore 'people'");
                    };
                    dataToStore.shift();
                }
            }
        }
        if( gridName )
        {
            if( dataToStore )
            {
                setTimeout(function()
                {
                    populateGrid(gridName);
                }, 50);
            }
            else
            {
                populateGrid(gridName);
            }
        }
    }
}

function populateGrid(gridName)
{
    w2ui[gridName].clear();

    var transaction = db.transaction("people", "readonly");
    var objectStore = transaction.objectStore("people");

    var request = objectStore.getAll();
    request.onsuccess = function(e)
    {
        w2ui[gridName].add(request.result);
        w2ui[gridName].refresh();
    }
    request.onerror = function(e)
    {
        console.log(e);
    }
}

function saveIDBToJSON()
{
    // Ouverture ou création de la base de données 'WebBlogiciel'
    var openRequest = indexedDB.open("WebBlogiciel", 1);
    openRequest.onupgradeneeded = function(e)
    {
        // Si elle n'existe pas ou si le numéro de version passé en second paramètre est supérieur à celui existant,
        // l'évenement 'onupgradeneeded' est déclenché, sinon la base de données est simplement ouverte.
        console.log("Upgrading...");
        var thisDB = e.target.result;

        if( !thisDB.objectStoreNames.contains("people") )
        {
            var objectStore = thisDB.createObjectStore("people", { autoIncrement: true });
            console.log("Created ObjectStore : people");
        }
    }
    openRequest.onsuccess = function(e)
    {
        console.log("Success!");
        db = e.target.result;

        var transaction = db.transaction("people", "readonly");
        var objectStore = transaction.objectStore("people");
        var request = objectStore.getAll();
        request.onsuccess = function(e)
        {
            var serializedData = JSON.stringify(request.result);
            /*Utilisation de la librairie 'FileSaver.js'*/
            var blob = new Blob([serializedData], {type: "application/json"});
            var saveAs = window.saveAs;
            saveAs(blob, "people.json");
        }
    }
}
Javascript
[
    { recid: 1, fname: "John", lname: "Doe", email: "jdoe@gmail.com", sdate: "4/3/2012" },
    { recid: 2, fname: "Stuart", lname: "Motzart", email: "jdoe@gmail.com", sdate: "4/3/2012" },
    { recid: 3, fname: "Jin", lname: "Franson", email: "jdoe@gmail.com", sdate: "4/3/2012" },
    { recid: 4, fname: "Susan", lname: "Ottie", email: "jdoe@gmail.com", sdate: "4/3/2012" },
    { recid: 5, fname: "Kelly", lname: "Silver", email: "jdoe@gmail.com", sdate: "4/3/2012" },
    { recid: 6, fname: "Francis", lname: "Gatos", email: "jdoe@gmail.com", sdate: "4/3/2012" },
    { recid: 7, fname: "Mark", lname: "Welldo", email: "jdoe@gmail.com", sdate: "4/3/2012" },
    { recid: 8, fname: "Thomas", lname: "Bahh", email: "jdoe@gmail.com", sdate: "4/3/2012" },
    { recid: 9, fname: "Sergei", lname: "Rachmaninov", email: "jdoe@gmail.com", sdate: "4/3/2012" }
]
Le format du fichier .json est ultra simple et fonctionne très bien avec IndexedDB et w2ui. Il s'agit tout simplement d'un tableau d'objets.

download Le source complet est téléchargeable ici.


Ecrire un commentaire