JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/idbwrapper/1.4.1/idbstore.min.js"></script>

JavaScript

//Test data
var testData = {
    test: [1, 2, 3],
    test2: 'test',
    test3: undefined,
    test4: 123,
    test5: []
}

for(var i = 0; i < 10000; i++) {
    testData.test5[i] = Math.random() * 100000;
}

//Uncomment clears (or run in console) if needed

//Init IDB and clear
//Uses IDB wrapper: http://cdnjs.cloudflare.com/ajax/libs/idbwrapper/1.4.1/idbstore.min.js
var idb = new IDBStore({
    dbName: 'testdb',
    storeName: 'test',
    dbVersion: '1.0',
    keyPath: null,
    //onStoreReady: function() {
        //idb.clear();
    //}
});

//Init WebSQL and empty/drop
var websql = openDatabase('test', '1.0', '', 1 * 1024 * 1024);
websql.transaction(function(tx) {
    //tx.executeSql('DROP TABLE IF EXISTS test;');
    tx.executeSql('CREATE TABLE IF NOT EXISTS test (id, value);');
});

//Clear localStorage
//localStorage.clear();

window.onbeforeunload = function () {
    //Save WebSQL
    websql.transaction(function(tx) {
      tx.executeSql('INSERT INTO test (id, value) VALUES (?, ?)', [1, JSON.stringify(testData)]);
    });
    //Save localStorage
    localStorage.setItem('test', JSON.stringify(testData));
    //Save IDB
    idb.put(1, testData);
    idb.put(2, testData);
    idb.put(3, testData);
    idb.put(4, testData);
    idb.put(5, testData);
    idb.put(6, testData);
};