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
150
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
150
From Strategy Definition to Execution with OKRs and Roadmap
sebarmeli
0
140
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
270
Managing a software engineering team
sebarmeli
1
590
Enforcing coding standards in a JS project
sebarmeli
0
580
Enforcing Coding Standards
sebarmeli
1
120
ES6: The future is now
sebarmeli
2
480
EcmaScript 6 - the future is here
sebarmeli
5
7.2k
Dependency management and Package management in JavaScript
sebarmeli
0
730
Other Decks in Programming
See All in Programming
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
190
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
210
CursorはMCPを使った方が良いぞ
taigakono
1
170
C++20 射影変換
faithandbrave
0
530
XP, Testing and ninja testing
m_seki
3
190
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
110
GoのGenericsによるslice操作との付き合い方
syumai
3
690
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Typedesign – Prime Four
hannesfritz
42
2.7k
How to train your dragon (web standard)
notwaldorf
93
6.1k
4 Signs Your Business is Dying
shpigford
184
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Applications with DynamoDB
mza
95
6.5k
Rails Girls Zürich Keynote
gr2m
94
14k
Producing Creativity
orderedlist
PRO
346
40k
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