Where is data stored when using an HTML 5 Web SQL Database
It's stored in a SQLite database. Here is a browser support chart I found: .
That said, the W3C has officially dropped support for WebSQL in favor of IndexedDB. Here's the equivalent chart for that:
You may also want to look at DataJS, which is a library that abstracts some of the details of local storage and works across browsers:
Hope that helps.
HTML5 Web SQL database file location in chrome
Navigate your Chrome to chrome://version url and check the Profile Path value. Your sqlite db should be inside it, in 'databases' folder.
And your particular problem with 2 found rows (rather than 4) is probably caused by inserting rows with same ids. id column is unique, so additional inserts are failing.
html 5 storage websql, and localStorage : for how long data is stored?
The most correct answer to this question is: You don't know.
The user could wipe his/her local data at any time, and any type of local storage is subject to user preferences and to be considered extremely volatile. However, there is no defined expiration time, according to Web Storage specifications:
Expiring stored data
User agents may, if so configured by the user, automatically delete stored data after a period of time.
For example, a user agent could be configured to treat third-party local storage areas as session-only storage, deleting the data once the user had closed all the browsing contexts that could access it.
This can restrict the ability of a site to track a user, as the site would then only be able to track the user across multiple sessions when he authenticates with the site itself (e.g. by making a purchase or logging in to a service).
However, this also reduces the usefulness of the API as a long-term storage mechanism. It can also put the user's data at risk, if the user does not fully understand the implications of data expiration.
Source: http://dev.w3.org/html5/webstorage/
HTML5 Web Storage and Web SQL Database
You cannot store information in websql and web storage forever. It is not suggested to store any critical data in these storage and rather any data stored in these storage should be synchronized with server db .
Can HTML5 Web SQL databases be used across pages?
It's local browser storage then no problem to read this form any page of the same domain. It is designed especially for it. The problem appear when you need to share Web SQL database across different domains, in this case you should deal with Same Origin Policy
Pulling Data From an SQL Database in HTML 5
the new (and pretty awesome) features of HTML5 is happening in the browser on the client side. What you will need is a back-end on the server side doing some magic. It is true that browsers now have databases but these are located on the phone, computer etc and as I understand your question you want these data to communicate with data on your server. To move data across the web you will need to perform HTTP-requests which can easily be done through javascript and ajax. Look a bit into these technologies and make a little server-side script that gathers data from the database and send it in a structured format to the phone (JSON, XML), then make a script in javascript on the client-side that parse these data and utilise them.
Good luck!
how to store data to database in HTML5
Here i pasted a little but very simple example of web sqlite database. i found it here
<--- --------------------------------------------------------------------------------------- ----
Blog Entry:
My Safari Browser SQLite Database Hello World Example
Author:
Ben Nadel / Kinky Solutions
Link:
[http://www.bennadel.com/index.cfm?event=blog.view&id=1940][2]
Date Posted:
Jun 11, 2010 at 9:38 AM
---- --------------------------------------------------------------------------------------- --->
Safari SQLite Hello World Example
// The first thing we want to do is create the local
// database (if it doesn't exist) or open the connection
// if it does exist. Let's define some options for our
// test database.
var databaseOptions = {
fileName: "sqlite_helloWorld",
version: "1.0",
displayName: "SQLite Hello World",
maxSize: 1024
};
// Now that we have our database properties defined, let's
// creaete or open our database, getting a reference to the
// generated connection.
//
// NOTE: This might throw errors, but we're not going to
// worry about that for this Hello World example.
var database = openDatabase(
databaseOptions.fileName,
databaseOptions.version,
databaseOptions.displayName,
databaseOptions.maxSize
);
// -------------------------------------------------- //
// -------------------------------------------------- //
// Now that we have the databse connection, let's create our
// first table if it doesn't exist. According to Safari, all
// queries must be part of a transaction. To execute a
// transaction, we have to call the transaction() function
// and pass it a callback that is, itself, passed a reference
// to the transaction object.
database.transaction(
function( transaction ){
// Create our girls table if it doesn't exist.
transaction.executeSql(
"CREATE TABLE IF NOT EXISTS girls (" +
"id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT," +
"name TEXT NOT NULL" +
");"
);
}
);
// -------------------------------------------------- //
// -------------------------------------------------- //
// Now that we have our database table created, let's
// create some "service" functions that we can use to
// touch the girls (no, not in that way - perv).
// NOTE: Since SQLite database interactions are performed
// asynchronously by default (it seems), we have to provide
// callbacks to execute when the results are available.
// I save a girl.
var saveGirl = function( name, callback ){
// Insert a new girl.
database.transaction(
function( transaction ){
// Insert a new girl with the given values.
transaction.executeSql(
(
"INSERT INTO girls (" +
"name " +
" ) VALUES ( " +
"? " +
");"
),
[
name
],
function( transaction, results ){
// Execute the success callback,
// passing back the newly created ID.
callback( results.insertId );
}
);
}
);
};
// I get all the girls.
var getGirls = function( callback ){
// Get all the girls.
database.transaction(
function( transaction ){
// Get all the girls in the table.
transaction.executeSql(
(
"SELECT " +
"* " +
"FROM " +
"girls " +
"ORDER BY " +
"name ASC"
),
[],
function( transaction, results ){
// Return the girls results set.
callback( results );
}
);
}
);
};
// I delete all the girls.
var deleteGirls = function( callback ){
// Get all the girls.
database.transaction(
function( transaction ){
// Delete all the girls.
transaction.executeSql(
(
"DELETE FROM " +
"girls "
),
[],
function(){
// Execute the success callback.
callback();
}
);
}
);
};
// -------------------------------------------------- //
// -------------------------------------------------- //
// When the DOM is ready, init the scripts.
$(function(){
// Get the form.
var form = $( "form" );
// Get the girl list.
var list = $( "#girls" );
// Get the Clear Girls link.
var clearGirls = $( "#clearGirls" );
// I refresh the girls list.
var refreshGirls = function( results ){
// Clear out the list of girls.
list.empty();
// Check to see if we have any results.
if (!results){
return;
}
// Loop over the current list of girls and add them
// to the visual list.
$.each(
results.rows,
function( rowIndex ){
var row = results.rows.item( rowIndex );
// Append the list item.
list.append( "<li>" + row.name + "</li>" );
}
);
};
// Bind the form to save the girl.
form.submit(
function( event ){
// Prevent the default submit.
event.preventDefault();
// Save the girl.
saveGirl(
form.find( "input.name" ).val(),
function(){
// Reset the form and focus the input.
form.find( "input.name" )
.val( "" )
.focus()
;
// Refresh the girl list.
getGirls( refreshGirls );
}
);
}
);
// Bind to the clear girls link.
clearGirls.click(
function( event ){
// Prevent default click.
event.preventDefault();
// Clear the girls
deleteGirls( refreshGirls );
}
);
// Refresh the girls list - this will pull the persisted
// girl data out of the SQLite database and put it into
// the UL element.
getGirls( refreshGirls );
});
</script>
<h1>
SQLite Hello World Example
</h1>
<form>
Name:
<input type="text" name="name" class="name" />
<input type="submit" value="Add Girl" />
</form>
<h2>
Girls
</h2>
<ul id="girls">
<!-- To be populated dynamically from SQLite. -->
</ul>
<p>
<a id="clearGirls" href="#">Clear Girls</a>!
</p>
Related Topics
Chrome Slow Scrolling with Fixed Position Elements
How to Center a Checkbox in a Table Cell
Align Flex Items with Different Heights in The Same Container
Show My Location on Google Maps API V3
How to Get a Div to Resize Its Height to Fit Container
HTML: How to Retain Formatting in Textarea
How to Make a Div 100% of Page (Not Screen) Height
Why Is My Element Not Sticking to The Left When Using Position Sticky in CSS
Flex Items Create Space Between Them When They Wrap
Nested Sticky Element with Zero Left Does Not Sticky
CSS Scale Height to Match Width - Possibly with a Formfactor
How to Put Spacing Between Tbody Elements
How to Style and Align Forms Without Tables
Automatic Retina Images for Web Sites
HTML 5 Input Type='Date' Disable Keyboard Input