Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Storage
Search
Sebastiano Armeli
March 09, 2011
Programming
0
83
Web Storage
Talk given in March 2011
Sebastiano Armeli
March 09, 2011
Tweet
Share
More Decks by Sebastiano Armeli
See All by Sebastiano Armeli
Cultivate Excellence In Engineering Teams through Continuous Software Engineering
sebarmeli
1
88
From Strategy Definition to Execution with OKRs and Roadmap
sebarmeli
0
90
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
240
Managing a software engineering team
sebarmeli
1
520
Enforcing coding standards in a JS project
sebarmeli
0
560
Enforcing Coding Standards
sebarmeli
1
110
ES6: The future is now
sebarmeli
2
470
EcmaScript 6 - the future is here
sebarmeli
5
7k
Dependency management and Package management in JavaScript
sebarmeli
0
670
Other Decks in Programming
See All in Programming
CSC509 Lecture 03
javiergs
PRO
0
130
Modern Functional Fluent CFML REST by Luis Majano
ortus24
0
110
NEWTにおけるiOS18対応の進め方
ryu1sazae
0
180
Iteratorでページネーションを実現する
sonatard
3
700
AWS CDKを用いたセキュアなCI/CDパイプラインの構築 / Build a secure CI/CD pipeline using AWS CDK
seike460
PRO
3
500
ファーストペンギンBot @Qiita Hackathon 2024 予選
dyson_web
0
200
Rails 8 Frontend: 10 commandments & 7 deadly sins in 2025
yshmarov
1
580
実践Dash - 手を抜きながら本気で作るデータApplicationの基本と応用 / Dash for Python and Baseball
shinyorke
2
210
利用者視点で考える、イテレータとの上手な付き合い方
syumai
4
210
C#および.NETに対する誤解をひも解く
ymd65536
0
180
Cohesion in Modeling and Design
mploed
3
180
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
13
3.4k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1365
200k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Design by the Numbers
sachag
278
19k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
Embracing the Ebb and Flow
colly
83
4.4k
Facilitating Awesome Meetings
lara
49
6k
Mobile First: as difficult as doing things right
swwweet
222
8.8k
Visualization
eitanlees
143
15k
A designer walks into a library…
pauljervisheath
201
24k
Git: the NoSQL Database
bkeepers
PRO
425
64k
The Art of Programming - Codeland 2020
erikaheidi
50
13k
Transcript
Web Storage Sebastiano Armeli-Battana
[email protected]
@sebarmeli Sunday, 20 February 2011
Remote Data Storage Sunday, 20 February 2011
Why Web Storage? • Performance • Speed • Reduced load
on the servers • Offline applications • Transaction - HTTP stateless Sunday, 20 February 2011
History of Client-side Storage •HTTP Cookie • userData Behaviour in
IE 5.5 • Local Shared Objects in Adobe Flash • Google Gears Sunday, 20 February 2011
Web Storage • by WHATWG / W3C • HTML5? Actually
not... • 2 Storage Areas : • localStorage • sessionStorage • globalStorage HTML Sunday, 20 February 2011
Storage API interface Storage { readonly attribute unsigned long length;
DOMString key(in unsigned long index); getter any getItem(in DOMString key); setter creator void setItem(in DOMString key, in any value); deleter void removeItem(in DOMString key); void clear(); }; Sunday, 20 February 2011
localStorage • localStorage.setItem(“key1”, “value1”); localStorage.setItem(“key2”, “value2”); • localStorage.getItem(“key1”); // “value1”
• localStorage.length; //2 • localStorage.removeItem(“key1”); • localStorage.length; // 1 • localStorage.clear(); • localStorage.length; // 0 Sunday, 20 February 2011
sessionStorage • sessionStorage.setItem(“key1”, “value1”); sessionStorage.setItem(“key2”, “value2”); • sessionStorage.getItem(“key1”); // “value1”
• sessionStorage.length; //2 • sessionStorage.removeItem(“key1”); • sessionStorage.length; // 1 • sessionStorage.clear(); • localStorage.length; // 0 Sunday, 20 February 2011
Storing Objects • Key/value pairs • Value is a STRING!
• Stringify / Parse JS Objects • JSON.stringify(myObject); • JSON.parse(myString); Sunday, 20 February 2011
Storage Event • “storage” event • Triggered when Storage Areas
change • Binded on Window • Attributes: • key, • oldValue • newValue • url Sunday, 20 February 2011
Support • IE 8+ • FF 3.5+ • Safari 4+
• Chrome 7+ • Opera 10.6+ • iOS Safari 4.0+ / Android 2.2+ Sunday, 20 February 2011
JS Utilities • YUI2 Storage • Dojo Storage • PersistJS
Sunday, 20 February 2011
Advantages (over Cookies) • Saving Bandwith • Size • Sessions
not leaking • Network sniffing Sunday, 20 February 2011
Limitations • 5 Mb (or 10Mb) • “QUOTA_EXCEEDED_ERR” • “SECURITY_ERR”
• Storage per origin • Cross directory attacks -> DO not USE it! • DNS Spoofing -> SSL Sunday, 20 February 2011
The future of Web Storage • Store data that rarely
change • Mobile Sites • Offline apps • More Storage? Index Database API Sunday, 20 February 2011
Thank you. Sunday, 20 February 2011