Editing Write Test: IndexedDB vs localStorage vs webSQL This edit will create a new revision. Your details (optional) Name Email (won’t be displayed; might be used for Gravatar) URL Test case details Title * Published (uncheck if you want to fiddle around before making the page public) Description (in case you feel further explanation is needed)(Markdown syntax is allowed) This tests localStorage performance against IndexedDB, both acting as an object store. localStorage tests contain JSON stringify/parse methods. There's a performance penalty for the IDB tests though, as these operate on IDB via a wrapper, so there are are some additional function calls being made. Are you a spammer? (just answer the question) Preparation code Preparation code HTML (this will be inserted in the <body> of a valid HTML5 document in standards mode) (useful when testing DOM operations or including libraries) <script src="https://raw.github.com/jensarps/IDBWrapper/master/IDBStore.js"> </script> <script> var scope = {}; // store setup var idb = new IDBStore({ dbName: 'jsperftestdb', storeName: 'jsperfteststore', dbVersion: '1.0', keyPath: 'id', autoIncrement: true, onStoreReady: function() { idb.clear(); } }); var ls = window.localStorage; ls.clear(); var websql = openDatabase('benchmark', '1.0', '', 1 * 1024 * 1024); websql.transaction(function(tx) { tx.executeSql('DROP TABLE IF EXISTS benchmark;'); tx.executeSql('CREATE TABLE benchmark (id, value);'); }); // data setup var i = 0, lastnames = ['smith', 'miller', 'doe', 'frankenstein', 'furter'], firstnames = ['peter', 'john', 'frank', 'james'], dummyData = { "web-app": { "servlet": [{ "servlet-name": "cofaxCDS", "servlet-class": "org.cofax.cds.CDSServlet", "init-param": { "configGlossary:installationAt": "Philadelphia, PA", "configGlossary:adminEmail": "ksm@pobox.com", "configGlossary:poweredBy": "Cofax", "configGlossary:poweredByIcon": "/images/cofax.gif", "configGlossary:staticPath": "/content/static", "templateProcessorClass": "org.cofax.WysiwygTemplate", "templateLoaderClass": "org.cofax.FilesTemplateLoader", "templatePath": "templates", "templateOverridePath": "", "defaultListTemplate": "listTemplate.htm", "defaultFileTemplate": "articleTemplate.htm", "useJSP": false, "jspListTemplate": "listTemplate.jsp", "jspFileTemplate": "articleTemplate.jsp", "cachePackageTagsTrack": 200, "cachePackageTagsStore": 200, "cachePackageTagsRefresh": 60, "cacheTemplatesTrack": 100, "cacheTemplatesStore": 50, "cacheTemplatesRefresh": 15, "cachePagesTrack": 200, "cachePagesStore": 100, "cachePagesRefresh": 10, "cachePagesDirtyRead": 10, "searchEngineListTemplate": "forSearchEnginesList.htm", "searchEngineFileTemplate": "forSearchEngines.htm", "searchEngineRobotsDb": "WEB-INF/robots.db", "useDataStore": true, "dataStoreClass": "org.cofax.SqlDataStore", "redirectionClass": "org.cofax.SqlRedirection", "dataStoreName": "cofax", "dataStoreDriver": "com.microsoft.jdbc.sqlserver.SQLServerDriver", "dataStoreUrl": "jdbc:microsoft:sqlserver://LOCALHOST:1433;DatabaseName=goon", "dataStoreUser": "sa", "dataStorePassword": "dataStoreTestQuery", "dataStoreTestQuery": "SET NOCOUNT ON;select test='test';", "dataStoreLogFile": "/usr/local/tomcat/logs/datastore.log", "dataStoreInitConns": 10, "dataStoreMaxConns": 100, "dataStoreConnUsageLimit": 100, "dataStoreLogLevel": "debug", "maxUrlLength": 500 } }, { "servlet-name": "cofaxEmail", "servlet-class": "org.cofax.cds.EmailServlet", "init-param": { "mailHost": "mail1", "mailHostOverride": "mail2" } }, { "servlet-name": "cofaxAdmin", "servlet-class": "org.cofax.cds.AdminServlet" }, { "servlet-name": "fileServlet", "servlet-class": "org.cofax.cds.FileServlet" }, { "servlet-name": "cofaxTools", "servlet-class": "org.cofax.cms.CofaxToolsServlet", "init-param": { "templatePath": "toolstemplates/", "log": 1, "logLocation": "/usr/local/tomcat/logs/CofaxTools.log", "logMaxSize": "", "dataLog": 1, "dataLogLocation": "/usr/local/tomcat/logs/dataLog.log", "dataLogMaxSize": "", "removePageCache": "/content/admin/remove?cache=pages&id=", "removeTemplateCache": "/content/admin/remove?cache=templates&id=", "fileTransferFolder": "/usr/local/tomcat/webapps/content/fileTransferFolder", "lookInContext": 1, "adminGroupID": 4, "betaServer": true } }], "servlet-mapping": { "cofaxCDS": "/", "cofaxEmail": "/cofaxutil/aemail/*", "cofaxAdmin": "/admin/*", "fileServlet": "/static/*", "cofaxTools": "/tools/*" }, "taglib": { "taglib-uri": "cofax.tld", "taglib-location": "/WEB-INF/tlds/cofax.tld" } } }; </script> Include JavaScript libraries as follows: <script src="//cdn.ext/library.js"></script> Define setup for all tests (variables, functions, arrays or other objects that will be used in the tests) (runs before each clocked test loop, outside of the timed code region) (e.g. define local test variables, reset global variables, clear canvas, etc.) (see FAQ) scope.i = 0; scope.smallData = { 'lastname': lastnames[Math.floor(Math.random() * 5)], 'firstanme': firstnames[Math.floor(Math.random() * 4)], 'dummyData': {} }; scope.largeData = { 'lastname': lastnames[Math.floor(Math.random() * 5)], 'firstanme': firstnames[Math.floor(Math.random() * 4)], 'dummyData': dummyData }; Define teardown for all tests (runs after each clocked test loop, outside of the timed code region) (see FAQ) Code snippets to compare Test 1 Title Async (check if this is an asynchronous test) Code scope.smallData.id = ++scope.i; ls[scope.smallData.id] = JSON.stringify(scope.smallData); Test 2 Title Async (check if this is an asynchronous test) Code scope.largeData.id = ++scope.i; ls[scope.largeData.id] = JSON.stringify(scope.largeData); Test 3 Title Async (check if this is an asynchronous test) Code scope.smallData.id = ++scope.i; idb.put(scope.smallData); Test 4 Title Async (check if this is an asynchronous test) Code scope.largeData.id = ++scope.i; idb.put(scope.largeData); Test 5 Title Async (check if this is an asynchronous test) Code scope.smallData.id = ++scope.i; websql.transaction(function(tx) { tx.executeSql('INSERT INTO benchmark (id, value) VALUES (?, ?)', [scope.smallData.id, JSON.stringify(scope.smallData)]); deferred.resolve(); }); Test 6 Title Async (check if this is an asynchronous test) Code scope.largeData.id = ++scope.i; websql.transaction(function(tx) { tx.executeSql('INSERT INTO benchmark (id, value) VALUES (?, ?)', [scope.largeData.id, JSON.stringify(scope.largeData)]); deferred.resolve(); });