html5 storage and browser storage
DESCRIPTION
TRANSCRIPT
HTML5 Storage and Local Storage
Sway Deng(@swaydeng)
2011-1-14
Cookie is our favorite, but……
Cookies:
• The size of storage space is small• The number of key-value pair is
limited• are included with every HTTP
request, slowing down web apps.
What we need:
• A lot of storage space• On the client,not included with every
HTTP request• That persists beyond a page refresh
What we already have:
• userData(IE)• Local Shared Objects(Adobe)• Gears(Google)
userData
Some code source…
userData
• available only in the same directory and with the same protocolno allowance for increasing space
• Depends on security settings
Intranet(Max)
Restricted(Min)
Document Limit(KB)
512 64
Domain Limit(KB) 10240 640
Local Shared Objects
Local Shared Objects
• Customize storage space（ default:100K）
• Same domain• Cross-browser
But Google has say goodbye to Gears
• HTML5 is more attractive
• Gears is not that popular
• We don’t need a duplicate
HTML5 Storage
Web Storage
Indexed Database
Offline Web Application
s
Web SQL Database
Web Storage
Web Storage support
Web Storage
interface Storage { readonly unsigned long length; DOMString key(index); any getItem(key); void setItem(key, value); void removeItem(key); void clear(); };
Web Storage
Web Storage
Remove data
Web Storage
• Storage event• sessionStorage• Limitations(permission,storage
space)
Web SQL Database
Web SQL Database support
Web SQL Database
Three core methods:
1. openDatabase2. transaction (?)3. executeSql
Demo
Web SQL Database
• Browser vendors don’t support it widely
• Inelegant solution• The specification is illegible• A better solution is already there
Why Web SQL DB is going to die?
Indexed Database
• Object based storage• NoSQL-Style(structured storage)• asynchronous APIs (synchronous APIs
later)
Open and set up a DB
Store data in DB
Indexed Database
• The answer is No!• But it is coming soon
Can we use now ?
Indexed Database
Offline Web Applications
• A solution for offline web apps
demo
Offline Web Applications
• Server side– addType text/cache-manifest .manifest
• Client side
<!DOCTYPE html> <html manifest="sample.manifest">
CACHE MANIFEST# revision 630../halma-localstorage.jscss/layout.css images/sofish.png
NETWORK:# assets that available only when online: sample.json
FALLBACK: notfound.html
Offline Web Applications
• Event– online– offline
Usage
• Customize your web(like customize google menu， store large numbers of video list etc.)
• Cache static assets（ css,js,images）
Problem
• Security• Storage space management
The end