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
110
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
120
From Strategy Definition to Execution with OKRs and Roadmap
sebarmeli
0
120
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
250
Managing a software engineering team
sebarmeli
1
550
Enforcing coding standards in a JS project
sebarmeli
0
570
Enforcing Coding Standards
sebarmeli
1
110
ES6: The future is now
sebarmeli
2
470
EcmaScript 6 - the future is here
sebarmeli
5
7.1k
Dependency management and Package management in JavaScript
sebarmeli
0
700
Other Decks in Programming
See All in Programming
Open source software: how to live long and go far
gaelvaroquaux
0
660
Ruby on cygwin 2025-02
fd0
0
180
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
190
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Angular Meetup Berlin
danielsogl
0
100
PHP ステートレス VS ステートフル 状態管理と並行性 / php-stateless-stateful
ytake
0
110
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
130
SwiftUI Viewの責務分離
elmetal
PRO
2
260
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
GitHub's CSS Performance
jonrohan
1030
460k
Speed Design
sergeychernyshev
27
810
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
The Language of Interfaces
destraynor
156
24k
Navigating Team Friction
lara
183
15k
Gamification - CAS2011
davidbonilla
80
5.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Rails Girls Zürich Keynote
gr2m
94
13k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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