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
120
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
130
From Strategy Definition to Execution with OKRs and Roadmap
sebarmeli
0
130
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
260
Managing a software engineering team
sebarmeli
1
570
Enforcing coding standards in a JS project
sebarmeli
0
580
Enforcing Coding Standards
sebarmeli
1
110
ES6: The future is now
sebarmeli
2
470
EcmaScript 6 - the future is here
sebarmeli
5
7.2k
Dependency management and Package management in JavaScript
sebarmeli
0
710
Other Decks in Programming
See All in Programming
Empowering Developers with HTML-Aware ERB Tooling @ RubyKaigi 2025, Matsuyama, Ehime
marcoroth
2
450
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
110
地域ITコミュニティの活性化とAWSに移行してみた話
yuukis
0
240
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
150
スモールスタートで始めるためのLambda×モノリス(Lambdalith)
akihisaikeda
2
270
Memory API : Patterns, Performance et Cas d'Utilisation
josepaumard
0
130
[NG India] Event-Based State Management with NgRx SignalStore
markostanimirovic
1
150
ミリしらMCP勉強会
watany
4
750
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
100
PHP で学ぶ OAuth 入門
azuki
1
180
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Webinar 2025
danielsogl
0
120
エンジニア未経験が最短で戦力になるためのTips
gokana
0
270
Featured
See All Featured
Docker and Python
trallard
44
3.3k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
RailsConf 2023
tenderlove
30
1.1k
KATA
mclloyd
29
14k
What's in a price? How to price your products and services
michaelherold
245
12k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
Speed Design
sergeychernyshev
29
900
Transcript
Web Storage Sebastiano Armeli-Battana seba.armeli@gmail.com @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