client-side storage 
DESCRIPTION
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.htmlTRANSCRIPT
![Page 1: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/1.jpg)
Client-side Storage
![Page 2: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/2.jpg)
Cookies
setcookie('name','Lorem Ipsum');
echo $_COOKIE['name'];
PHP
document.cookie = 'name=Lorem Ipsum';
alert(document.cookie);
JavaScript
![Page 3: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/3.jpg)
Sessionssession_start();$_SESSION['name'] = 'Lorem Ipsum';
echo $_SESSION['name'];
PHP
![Page 4: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/4.jpg)
sessionStorage
sessionStorage.setItem('name','Lorem Ipsum');
alert(sessionStorage.getItem('name'));
JavaScript
![Page 5: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/5.jpg)
localStorage
localStorage.setItem('name','Lorem Ipsum');
alert(localStorage.getItem('name'));
JavaScript
![Page 6: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/6.jpg)
BeispielTic Tac Toe
![Page 7: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/7.jpg)
localDatabase
![Page 8: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/8.jpg)
openDatabase
var db = openDatabase('shortName','1.0','displayName', 10000);
![Page 9: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/9.jpg)
create table
db.transaction( function(transaction){ transaction.executeSql('CREATE TABLE foobar (id, name)'); })
![Page 10: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/10.jpg)
insert into
db.transaction( function(transaction){ transaction.executeSql('INSERT INTO foobar (id, name) VALUES ("1", "Maik")'); })
![Page 11: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/11.jpg)
SQLCREATE 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'
![Page 12: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/12.jpg)
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
![Page 13: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/13.jpg)
SQLite Documentationwww.sqlite.org/lang.html
![Page 14: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/14.jpg)
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)); } }) })
![Page 15: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/15.jpg)
Referencedeveloper.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html
![Page 16: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/16.jpg)
BeispielText-Editor
![Page 17: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/17.jpg)
BeispielSmashing Magazine Offline App
![Page 18: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/18.jpg)
cache.manifestCACHE MANIFEST
# Cache manifest version 0.2
CACHE:style.css
NETWORK:*
FALLBACK:images/ images/fallback.png
![Page 19: Client-side Storage ](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54bd637a4a79595e238b4616/html5/thumbnails/19.jpg)
geschafft. danke. fragen?