Intruduction to sessionStorage, localStorage &localDatabase. Example http://dev.augentier.info/InterfaceEntwicklung/smashing_offline/ more information http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html

1. Client-side Storage

2. Cookies
setcookie('name','Lorem Ipsum'); document.cookie = 'name=Lorem Ipsum';
echo $_COOKIE['name']; alert(document.cookie);
PHP JavaScript

3. Sessions
session_start();
$_SESSION['name'] = 'Lorem Ipsum';
echo $_SESSION['name'];
PHP

4. sessionStorage
sessionStorage.setItem('name','Lorem Ipsum');
alert(sessionStorage.getItem('name'));
JavaScript

5. localStorage
localStorage.setItem('name','Lorem Ipsum');
alert(localStorage.getItem('name'));
JavaScript

6. Beispiel
Tic Tac Toe

7. localDatabase

8. openDatabase
var db = openDatabase('shortName','1.0','displayName', 10000);

9. create table
db.transaction(
function(transaction){
transaction.executeSql('CREATE TABLE foobar (id, name)');
}
)

10. insert into
db.transaction(
function(transaction){
transaction.executeSql('INSERT INTO foobar (id, name) VALUES ("1", "Maik")');
}
)

11. SQL
CREATE TABLE foobar (
id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
name VARCHAR(200) NOT NULL,
description TEXT NOT NULL
)
INSERT INTO foobar (
name,
description
) VALUES (
'Maik',
'Maik lebt in Berlin und ist 24 Jahre alt.'
)
UPDATE foobar SET name = 'Torben' WHERE name == 'Maik'

12. SQL
SELECT name FROM foobar
SELECT * FROM foobar
SELECT * FROM foobar WHERE name == 'Torben'
SELECT * FROM foobar WHERE name LIKE 'torben' ORDER BY id DESC LIMIT 5

13. SQLite Documentation
www.sqlite.org/lang.html

14. handle results
db.transaction(
function(transaction){
transaction.executeSql('SELECT * FROM foobar',[ ],
function (transaction, results){
for(var i=0; i<results.rows.length; i++){
console.log(results.rows.item(i));
}
})
}
)

15. Reference
developer.apple.com/library/safari/#documentation/iPhone/Conceptual/
SafariJSDatabaseGuide/Introduction/Introduction.html

16. Beispiel
Text-Editor

17. Beispiel
Smashing Magazine Offline App

18. cache.manifest
CACHE MANIFEST
# Cache manifest version 0.2
CACHE:
style.css
NETWORK:
*
FALLBACK:
images/ images/fallback.png

19. geschafft. danke. fragen?