Submit Search
Upload
Web Storage & Web Workers
•
3 likes
•
3,646 views
Inbal Geffen
Follow
Web Storage & Web Workers
Read less
Read more
Technology
Report
Share
Report
Share
1 of 22
Download now
Download to read offline
Recommended
Web scraping
Web scraping
Ashley Davis
5 Best Metaverse Games to Play
5 Best Metaverse Games to Play
101 Blockchains
Les 5 risques les plus critiques des applications Web selon l'OWASP
Les 5 risques les plus critiques des applications Web selon l'OWASP
yaboukir
AngularJS Security: defend your Single Page Application
AngularJS Security: defend your Single Page Application
Carlo Bonamico
Web Development In 2018
Web Development In 2018
Traversy Media
API & Backend Integration
API & Backend Integration
Elewayte
Web application framework
Web application framework
Pankaj Chand
Apache Spark vs Apache Flink
Apache Spark vs Apache Flink
AKASH SIHAG
Recommended
Web scraping
Web scraping
Ashley Davis
5 Best Metaverse Games to Play
5 Best Metaverse Games to Play
101 Blockchains
Les 5 risques les plus critiques des applications Web selon l'OWASP
Les 5 risques les plus critiques des applications Web selon l'OWASP
yaboukir
AngularJS Security: defend your Single Page Application
AngularJS Security: defend your Single Page Application
Carlo Bonamico
Web Development In 2018
Web Development In 2018
Traversy Media
API & Backend Integration
API & Backend Integration
Elewayte
Web application framework
Web application framework
Pankaj Chand
Apache Spark vs Apache Flink
Apache Spark vs Apache Flink
AKASH SIHAG
Web Development Presentation
Web Development Presentation
TurnToTech
Cross Site Request Forgery (CSRF) Scripting Explained
Cross Site Request Forgery (CSRF) Scripting Explained
Valency Networks
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
Rajnirani18
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
Kohei Kadowaki
Web 3.0
Web 3.0
Talentica Software
user Behavior Analysis with Session Windows and Apache Kafka's Streams API
user Behavior Analysis with Session Windows and Apache Kafka's Streams API
confluent
Unique ID generation in distributed systems
Unique ID generation in distributed systems
Dave Gardner
What is web scraping?
What is web scraping?
Brijesh Prajapati
Web Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo Fadojutimi
Temitayo Fadojutimi
MariaDB migration from commercial database
MariaDB migration from commercial database
GOTO Satoru
Web dev syllabus
Web dev syllabus
Adithcheshan
Progressive Web App
Progressive Web App
Subodh Garg
The Apollo and GraphQL Stack
The Apollo and GraphQL Stack
Sashko Stubailo
Druid+superset
Druid+superset
Dongwoo Lee
WEB DEVELOPMENT
WEB DEVELOPMENT
khushi74
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
Web3 Fundamentals
Web3 Fundamentals
101 Blockchains
Metaverse building (blockchain, nft, 3d, vr)
Metaverse building (blockchain, nft, 3d, vr)
Wajdi Ben Rabah
Full stack web development
Full stack web development
Crampete
Introduction vulnérabilité web
Introduction vulnérabilité web
davystoffel
Html5 storage suggestions for challenges.pptx
Html5 storage suggestions for challenges.pptx
deepmoteria
Local storage in Web apps
Local storage in Web apps
Ivano Malavolta
More Related Content
What's hot
Web Development Presentation
Web Development Presentation
TurnToTech
Cross Site Request Forgery (CSRF) Scripting Explained
Cross Site Request Forgery (CSRF) Scripting Explained
Valency Networks
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
Rajnirani18
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
Kohei Kadowaki
Web 3.0
Web 3.0
Talentica Software
user Behavior Analysis with Session Windows and Apache Kafka's Streams API
user Behavior Analysis with Session Windows and Apache Kafka's Streams API
confluent
Unique ID generation in distributed systems
Unique ID generation in distributed systems
Dave Gardner
What is web scraping?
What is web scraping?
Brijesh Prajapati
Web Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo Fadojutimi
Temitayo Fadojutimi
MariaDB migration from commercial database
MariaDB migration from commercial database
GOTO Satoru
Web dev syllabus
Web dev syllabus
Adithcheshan
Progressive Web App
Progressive Web App
Subodh Garg
The Apollo and GraphQL Stack
The Apollo and GraphQL Stack
Sashko Stubailo
Druid+superset
Druid+superset
Dongwoo Lee
WEB DEVELOPMENT
WEB DEVELOPMENT
khushi74
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
Web3 Fundamentals
Web3 Fundamentals
101 Blockchains
Metaverse building (blockchain, nft, 3d, vr)
Metaverse building (blockchain, nft, 3d, vr)
Wajdi Ben Rabah
Full stack web development
Full stack web development
Crampete
Introduction vulnérabilité web
Introduction vulnérabilité web
davystoffel
What's hot
(20)
Web Development Presentation
Web Development Presentation
Cross Site Request Forgery (CSRF) Scripting Explained
Cross Site Request Forgery (CSRF) Scripting Explained
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
Web 3.0
Web 3.0
user Behavior Analysis with Session Windows and Apache Kafka's Streams API
user Behavior Analysis with Session Windows and Apache Kafka's Streams API
Unique ID generation in distributed systems
Unique ID generation in distributed systems
What is web scraping?
What is web scraping?
Web Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo Fadojutimi
MariaDB migration from commercial database
MariaDB migration from commercial database
Web dev syllabus
Web dev syllabus
Progressive Web App
Progressive Web App
The Apollo and GraphQL Stack
The Apollo and GraphQL Stack
Druid+superset
Druid+superset
WEB DEVELOPMENT
WEB DEVELOPMENT
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Web3 Fundamentals
Web3 Fundamentals
Metaverse building (blockchain, nft, 3d, vr)
Metaverse building (blockchain, nft, 3d, vr)
Full stack web development
Full stack web development
Introduction vulnérabilité web
Introduction vulnérabilité web
Viewers also liked
Html5 storage suggestions for challenges.pptx
Html5 storage suggestions for challenges.pptx
deepmoteria
Local storage in Web apps
Local storage in Web apps
Ivano Malavolta
Best Web-based Data Visualization tools
Best Web-based Data Visualization tools
Atchai
HTML5 Local Storage
HTML5 Local Storage
Lior Zamir
HTML5 Storage/Cache
HTML5 Storage/Cache
Andy Wang
Html5 web storage
Html5 web storage
Mindfire Solutions
PyCon 2012: Python for data lovers: explore it, analyze it, map it
PyCon 2012: Python for data lovers: explore it, analyze it, map it
Jacqueline Kazil
Html5-Web-Storage
Html5-Web-Storage
Mindfire Solutions
Personas: Understanding the User Behind the Visit
Personas: Understanding the User Behind the Visit
Michael King
Cloud storage slides
Cloud storage slides
Evan Powell
Viewers also liked
(10)
Html5 storage suggestions for challenges.pptx
Html5 storage suggestions for challenges.pptx
Local storage in Web apps
Local storage in Web apps
Best Web-based Data Visualization tools
Best Web-based Data Visualization tools
HTML5 Local Storage
HTML5 Local Storage
HTML5 Storage/Cache
HTML5 Storage/Cache
Html5 web storage
Html5 web storage
PyCon 2012: Python for data lovers: explore it, analyze it, map it
PyCon 2012: Python for data lovers: explore it, analyze it, map it
Html5-Web-Storage
Html5-Web-Storage
Personas: Understanding the User Behind the Visit
Personas: Understanding the User Behind the Visit
Cloud storage slides
Cloud storage slides
Similar to Web Storage & Web Workers
webworkers
webworkers
Asanka Indrajith
Should you use HTML5 to build your product? The pros & cons of using current ...
Should you use HTML5 to build your product? The pros & cons of using current ...
boxuno
Make Mobile Apps Quickly
Make Mobile Apps Quickly
Gil Irizarry
Hibernate complete Training
Hibernate complete Training
sourabh aggarwal
PyGrunn2013 High Performance Web Applications with TurboGears
PyGrunn2013 High Performance Web Applications with TurboGears
Alessandro Molina
Persistent Offline Storage White
Persistent Offline Storage White
Alexei White
Introduction to Performance APIs
Introduction to Performance APIs
Shogo Sensui
Sprint 17
Sprint 17
ManageIQ
Intro to XPages for Administrators (DanNotes, November 28, 2012)
Intro to XPages for Administrators (DanNotes, November 28, 2012)
Per Henrik Lausten
Web worker
Web worker
Nitin Giri
WP - Unit I.ppt
WP - Unit I.ppt
SATHYABAMAMADHANKUMA
Ad108 - XPages in the IBM Lotus Notes Client - A Deep Dive!
Ad108 - XPages in the IBM Lotus Notes Client - A Deep Dive!
ddrschiw
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Gil Irizarry
Node Web Development 2nd Edition: Chapter1 About Node
Node Web Development 2nd Edition: Chapter1 About Node
Rick Chang
Node JS Crash Course
Node JS Crash Course
Haim Michael
HTML5 Web storage
HTML5 Web storage
Muhammad Ehtisham Siddiqui
Polymer Web Framework - Swecha Boot Camp
Polymer Web Framework - Swecha Boot Camp
Swecha | స్వేచ్ఛ
Brief history of web components
Brief history of web components
Yevgeniy Valeyev
At Your Service - Abusing the Service Workers Web API
At Your Service - Abusing the Service Workers Web API
Daniel Abeles
PHP BASIC PRESENTATION
PHP BASIC PRESENTATION
krutitrivedi
Similar to Web Storage & Web Workers
(20)
webworkers
webworkers
Should you use HTML5 to build your product? The pros & cons of using current ...
Should you use HTML5 to build your product? The pros & cons of using current ...
Make Mobile Apps Quickly
Make Mobile Apps Quickly
Hibernate complete Training
Hibernate complete Training
PyGrunn2013 High Performance Web Applications with TurboGears
PyGrunn2013 High Performance Web Applications with TurboGears
Persistent Offline Storage White
Persistent Offline Storage White
Introduction to Performance APIs
Introduction to Performance APIs
Sprint 17
Sprint 17
Intro to XPages for Administrators (DanNotes, November 28, 2012)
Intro to XPages for Administrators (DanNotes, November 28, 2012)
Web worker
Web worker
WP - Unit I.ppt
WP - Unit I.ppt
Ad108 - XPages in the IBM Lotus Notes Client - A Deep Dive!
Ad108 - XPages in the IBM Lotus Notes Client - A Deep Dive!
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Node Web Development 2nd Edition: Chapter1 About Node
Node Web Development 2nd Edition: Chapter1 About Node
Node JS Crash Course
Node JS Crash Course
HTML5 Web storage
HTML5 Web storage
Polymer Web Framework - Swecha Boot Camp
Polymer Web Framework - Swecha Boot Camp
Brief history of web components
Brief history of web components
At Your Service - Abusing the Service Workers Web API
At Your Service - Abusing the Service Workers Web API
PHP BASIC PRESENTATION
PHP BASIC PRESENTATION
More from Inbal Geffen
Css3
Css3
Inbal Geffen
Jqeury ajax plugins
Jqeury ajax plugins
Inbal Geffen
Jquery mobile2
Jquery mobile2
Inbal Geffen
Jquery2
Jquery2
Inbal Geffen
J querypractice
J querypractice
Inbal Geffen
J queryui
J queryui
Inbal Geffen
Mysql & Php
Mysql & Php
Inbal Geffen
jQuery mobile UX
jQuery mobile UX
Inbal Geffen
Jqeury ajax plugins
Jqeury ajax plugins
Inbal Geffen
More from Inbal Geffen
(9)
Css3
Css3
Jqeury ajax plugins
Jqeury ajax plugins
Jquery mobile2
Jquery mobile2
Jquery2
Jquery2
J querypractice
J querypractice
J queryui
J queryui
Mysql & Php
Mysql & Php
jQuery mobile UX
jQuery mobile UX
Jqeury ajax plugins
Jqeury ajax plugins
Recently uploaded
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Igalia
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
Pixlogix Infotech
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Katpro Technologies
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Enterprise Knowledge
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
Recently uploaded
(20)
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Slack Application Development 101 Slides
Slack Application Development 101 Slides
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Web Storage & Web Workers
1.
HTML5 Web Storage (DOM
storage) ©Inbal Geffen 2012
2.
Why? ●
HTTP is stateless ● We want to keep record of what the user did ● We want to be able to work "offline" ● We don't want to force users to signup / login ©Inbal Geffen 2012
3.
Cookies ●
Used before HTML5 Web Storage ● 4KB memory limitation per cookie ● Sent in every request ● Have a "bad reputation" ©Inbal Geffen 2012
4.
localStorage vs. sessionStorage In Both ●
Data is stored as key/value pairs ● Data is stored in string form ● Use the same API : setItem(), getItem(), clear(), removeItem() ● Fire 'storage' event ©Inbal Geffen 2012
5.
localStorage vs. sessionStorage Differ in
scope and lifetime ● sessionStorage is stored until the window is closed ● localStorage is stored until the storage is cleared ● localStorage is synchronized within the browser windows and tabs ● sessionStorage - multiple instances of the same window without collision ©Inbal Geffen 2012
6.
Web Storage Support ●
We must remember that not all browsers support "Web Storage" function checkStorageSupport() { if (!window.localStorage) { alert('This browser does NOT support localStorage'); } } ©Inbal Geffen 2012
7.
Web Storage API setItem //set
Item in local storage localStorage.setItem("userName", userName); //can also use immediate set, but this is less recommended localStorage.userName=userName; //set Item in session storage sessionStorage.setItem("userName", userName); //can also use the immediate set, but this is less recommended sessionStorage.userName=userName; ©Inbal Geffen 2012
8.
Web Storage API getItem //get
Item in local storage var userName = localStorage.getItem("userName); //can also use immediate get, but this is less recommended var userName = localStorage.userName; //get Item in session storage sessionStorage.getItem("userName); //can also use the immediate set, but this is less recommended var userName = sessionStorage.userName; ©Inbal Geffen 2012
9.
Web Storage API clear(),
removeItem //clear the local storage localStorage.clear(); //remove specific item from local storage localStorage.removeItem("userName"); //localStorage.getItem("userName") => NULL //clear the session storage sessionStorage.clear(); //remove specific item from session storage sessionStorage.removeItem("userName"); ©Inbal Geffen 2012
10.
Web Storage API ●
Web Storage is an array ● localStorage.length ● Item in the ith position in the array : localStorage.key(i) ©Inbal Geffen 2012
11.
Storage Event //Fired when
performing an operation on the storage if (window.addEventListener) { window.addEventListener("storage", handleStorageEvent, false); } else { // for IE versions below IE9 window.attachEvent("onstorage", handleStorageEvent); }; function handleStorageEvent(eventData) { // Do something } ©Inbal Geffen 2012
12.
Things to remember •
Local storage persists until it is deleted or the browser’s cache is cleared. • Session storage persists until it is deleted or the browsing context is closed. • Data stored by one browser is not accessible by another browser. For example, data stored by Chrome is not seen by Firefox. • Objects should be stored as strings. • For security reasons, sensitive data should not be stored, especially in local storage. • Changes to a storage area cause a “storage” event to be fired. • As with many other HTML5 features, web storage is not yet implemented consistently. ©Inbal Geffen 2012
13.
HTML5 Web Workers
©Inbal Geffen 2012
14.
THE PROBLEM: JAVASCRIPT
CONCURRENCY • JavaScript is a single-threaded environment • Used to be "solved" with asynchronous techniques such as: setTimeout(), setInterval(), XMLHttpRequest, and event handlers • Asynchronous events are processed after the current executing script • Web Workers are the HTML5 solution, enabling multi threading ©Inbal Geffen 2012
15.
Web Workers -
Use Cases Doing an action/process on the background, without harming the UI Show something to the user and then we can update the UI with the result. ● Updating many rows of local web database ● Processing large arrays ● Background I/O - fetch data for later ● Spell checker ● Code syntax highlighting or other real-time text formatting ©Inbal Geffen 2012
16.
Web Workers Support ●
We need to remember to check browser support for web workers function checkWorkerSupport() { if (typeof(window.Worker) === "undefined") alert("Your browser doesn't support HTML5 Web Workers!"); } ©Inbal Geffen 2012
17.
Create Web Worker
- 1 ● Web workers run from an external JS file (We will use a file called primesWorker.js as an example) ● Web workers will be called from our HTML file ● So we need two files : our HTML file and a JS file ● Communication is done using messages : postMessage() ● Ths JS file will have the function we would like to run on a different thread ● The HTML file will: ○ Call the Web Worker (using javascript) ○ Respond to the Web Worker's messages ○ Change the UI ©Inbal Geffen 2012
18.
Create Web Worker
- 2 Main HTML file - create web worker ● Create a new instance of web worker The worker gets the file name as a parameter var worker = new Worker("primesWorker.js"); ● If the file exists, a new thread will be asynchronously created ● Calling the worker: postMessage() worker.postMessage(100); ● postMessage() can get one parameter ● This is the parameter that will be sent to the worker ● So we see we can send messages to the worker from the HTML file ©Inbal Geffen 2012
19.
Create Web Worker
- 3 Main HTML file - get info from web worker ● Getting messages FROM the worker ● We need to listen to the 'message' event worker.onmessage = function (e) { //do something with the message we got from the worker } ©Inbal Geffen 2012
20.
Create Web Worker
- 4 Main HTML file - errors ● Check for errors // Show errors from the worker worker.onerror = function (error) { alert(error.data); } ©Inbal Geffen 2012
21.
Features Available to
Workers Due to their multi-threaded behavior, web workers only has access to a subset of JavaScript's features: ● The navigator object ● The location object (contains information about the current URL) ● XMLHttpRequest ● setTimeout()/clearTimeout() and setInterval()/clearInterval() ● Importing external scripts using the importScripts() method ● Spawning other web workers ©Inbal Geffen 2012
22.
Workers do NOT
have access ● The DOM (it's not thread-safe) ● The window object ● The document object ● The parent object That's why we need to communicate using messages. ©Inbal Geffen 2012
Download now