| <html> |
| <head> |
| <title>Database Tester</title> |
| <style> |
| div.Experiment { border: 1px solid black; |
| padding: 1 1 1 1; } |
| </style> |
| <script> |
| |
| var junkDB; |
| |
| openJunkDatabase(); |
| |
| function openJunkDatabase() |
| { |
| if (!window.openDatabase) |
| return; |
| |
| try { |
| junkDB = openDatabase("JunkDataTest", "1.0", "Repository for junk data to test quota management", 1); |
| } catch(err) { alert("Failed to open database - " + err); } |
| |
| junkDB.transaction(function(tx) { |
| tx.executeSql("SELECT COUNT(*) FROM JunkDataTable", [], null, function(tx, error) { |
| tx.executeSql("CREATE TABLE JunkDataTable (data TEXT)", []); |
| }); |
| }, function(err) { |
| alert("Error - " + err.code); |
| }); |
| |
| return junkDB; |
| } |
| |
| var totalAdded = 0; |
| |
| function addData() |
| { |
| if (!junkDB && !openJunkDatabase()) |
| return; |
| |
| var length = Number(dataSizeElement().value); |
| var data = makeStringOfLength(length); |
| |
| junkDB.transaction(function(tx) { |
| tx.executeSql("INSERT INTO JunkDataTable (data) VALUES (?)", [data], function(tx, result) { |
| totalAdded += length; |
| updateTotal(); |
| }, function(tx, err) { |
| alert("Failed to insert data into database - (" + err.code + ") " + err.message); |
| }); |
| }, function(err) { |
| alert("Failed to open transaction with junk database - (" + err.code + ") " + err.message); |
| }); |
| } |
| |
| function makeStringOfLength(n) |
| { |
| var str = "X"; |
| while (str.length < n) |
| str += ((str.length << 1) < n ? str : makeStringOfLength(n - str.length)); |
| |
| return str; |
| } |
| |
| var _dataSizeElement; |
| function dataSizeElement() |
| { |
| if (!_dataSizeElement) |
| _dataSizeElement = document.getElementById("DataSize"); |
| |
| return _dataSizeElement; |
| } |
| |
| function updateDataSize() |
| { |
| var num = Number(dataSizeElement().value); |
| document.getElementById("DataSizeDisplay").value = "Data size: " + num; |
| } |
| |
| function updateTotal() |
| { |
| document.getElementById("TotalAdded").innerHTML = "Total characters added: " + totalAdded; |
| } |
| |
| </script> |
| </head> |
| <body> |
| <p>This page is a dumping ground for various tests and features for the HTML5 client side database storage spec.</p> |
| <p>Any manual tests or experiments needing for development of the storage API can be placed here so they are accessible on a live web page</p> |
| |
| <div class="Experiment"> |
| <input id="DataSize" type="range" min="0" max="1048576" step="1024" value="1024" oninput="updateDataSize();"><br> |
| <textarea id="DataSizeDisplay" rows="1" cols="15" readonly style="resize:none"></textarea><br> |
| <textarea id="TotalAdded" rows="1" cols="25" readonly style="resize:none">Total characters added: 0</textarea><br> |
| <script>updateDataSize();</script> |
| <button onclick="addData();">Add Data</button> |
| </div> |
| </body> |
| </html> |