Html5 storage and browser storage
-
Upload
sway-deng -
Category
Technology
-
view
1.365 -
download
0
description
Transcript of Html5 storage and browser storage
![Page 1: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/1.jpg)
HTML5 Storage and Local Storage
Sway Deng(@swaydeng)
2011-1-14
![Page 2: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/2.jpg)
![Page 3: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/3.jpg)
Cookie is our favorite, but……
![Page 4: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/4.jpg)
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.
![Page 5: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/5.jpg)
What we need:
• A lot of storage space• On the client,not included with every
HTTP request• That persists beyond a page refresh
![Page 6: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/6.jpg)
What we already have:
• userData(IE)• Local Shared Objects(Adobe)• Gears(Google)
![Page 7: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/7.jpg)
userData
Some code source…
![Page 8: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/8.jpg)
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
![Page 9: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/9.jpg)
Local Shared Objects
![Page 10: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/10.jpg)
Local Shared Objects
• Customize storage space( default:100K)
• Same domain• Cross-browser
![Page 11: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/11.jpg)
![Page 12: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/12.jpg)
But Google has say goodbye to Gears
• HTML5 is more attractive
• Gears is not that popular
• We don’t need a duplicate
![Page 13: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/13.jpg)
HTML5 Storage
Web Storage
Indexed Database
Offline Web Application
s
Web SQL Database
![Page 14: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/14.jpg)
Web Storage
Web Storage support
![Page 15: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/15.jpg)
Web Storage
interface Storage { readonly unsigned long length; DOMString key(index); any getItem(key); void setItem(key, value); void removeItem(key); void clear(); };
![Page 16: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/16.jpg)
Web Storage
![Page 17: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/17.jpg)
Web Storage
Remove data
![Page 18: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/18.jpg)
Web Storage
• Storage event• sessionStorage• Limitations(permission,storage
space)
![Page 19: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/19.jpg)
Web SQL Database
Web SQL Database support
![Page 20: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/20.jpg)
Web SQL Database
Three core methods:
1. openDatabase2. transaction (?)3. executeSql
Demo
![Page 21: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/21.jpg)
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?
![Page 22: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/22.jpg)
Indexed Database
• Object based storage• NoSQL-Style(structured storage)• asynchronous APIs (synchronous APIs
later)
![Page 23: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/23.jpg)
Open and set up a DB
![Page 24: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/24.jpg)
Store data in DB
![Page 25: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/25.jpg)
Indexed Database
• The answer is No!• But it is coming soon
Can we use now ?
![Page 26: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/26.jpg)
Indexed Database
![Page 27: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/27.jpg)
Offline Web Applications
• A solution for offline web apps
demo
![Page 28: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/28.jpg)
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
![Page 29: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/29.jpg)
Offline Web Applications
• Event– online– offline
![Page 30: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/30.jpg)
Usage
• Customize your web(like customize google menu, store large numbers of video list etc.)
• Cache static assets( css,js,images)
![Page 31: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/31.jpg)
Problem
• Security• Storage space management
![Page 32: Html5 storage and browser storage](https://reader033.fdocuments.us/reader033/viewer/2022042613/54771a85b4af9f42758b45a9/html5/thumbnails/32.jpg)
The end