Submit Search
Upload
Web Storage & Web Workers
•
3 likes
•
3,643 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
Basics of JavaScript
Basics of JavaScript
Bala Narayanan
Web Development
Web Development
SabahtHussein
Web Application Development Tools for Creating Perfect User Experience
Web Application Development Tools for Creating Perfect User Experience
ChromeInfo Technologies
Web Designing
Web Designing
BALUJAINSTITUTE
Web Development
Web Development
Aditya Raman
Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-development
Global Media Insight
Node js
Node js
Fatih Şimşek
Firebase PPT
Firebase PPT
JATIN GUPTA
Recommended
Basics of JavaScript
Basics of JavaScript
Bala Narayanan
Web Development
Web Development
SabahtHussein
Web Application Development Tools for Creating Perfect User Experience
Web Application Development Tools for Creating Perfect User Experience
ChromeInfo Technologies
Web Designing
Web Designing
BALUJAINSTITUTE
Web Development
Web Development
Aditya Raman
Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-development
Global Media Insight
Node js
Node js
Fatih Şimşek
Firebase PPT
Firebase PPT
JATIN GUPTA
Brief History of JavaScript
Brief History of JavaScript
Rifad Ainun Nazieb
Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
Web development | Derin Dolen
Web development | Derin Dolen
Derin Dolen
Web-Development-ppt (1).pptx
Web-Development-ppt (1).pptx
RaihanUddin57
Introduction to Web Development
Introduction to Web Development
Parvez Mahbub
Web browsers and web servers
Web browsers and web servers
Angelica Amolo
Setting up your development environment
Setting up your development environment
Nicole Ryan
Angularjs PPT
Angularjs PPT
Amit Baghel
TypeScript - An Introduction
TypeScript - An Introduction
NexThoughts Technologies
Advanced Web Development
Advanced Web Development
Robert J. Stein
Web Development Presentation
Web Development Presentation
TurnToTech
Web development presentation
Web development presentation
Vaishnavi8950
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
Edureka!
ppt of web development for diploma student
ppt of web development for diploma student
Abhishekchauhan863165
Introduction to asp.net
Introduction to asp.net
SHADAB ALI
Introduction to JavaScript Basics.
Introduction to JavaScript Basics.
Hassan Ahmed Baig - Web Developer
Modern Web Development
Modern Web Development
Robert Nyman
Web Design
Web Design
misterel
Web server
Web server
Touhid Arastu
JAVA SCRIPT
JAVA SCRIPT
Go4Guru
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
Brief History of JavaScript
Brief History of JavaScript
Rifad Ainun Nazieb
Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
Web development | Derin Dolen
Web development | Derin Dolen
Derin Dolen
Web-Development-ppt (1).pptx
Web-Development-ppt (1).pptx
RaihanUddin57
Introduction to Web Development
Introduction to Web Development
Parvez Mahbub
Web browsers and web servers
Web browsers and web servers
Angelica Amolo
Setting up your development environment
Setting up your development environment
Nicole Ryan
Angularjs PPT
Angularjs PPT
Amit Baghel
TypeScript - An Introduction
TypeScript - An Introduction
NexThoughts Technologies
Advanced Web Development
Advanced Web Development
Robert J. Stein
Web Development Presentation
Web Development Presentation
TurnToTech
Web development presentation
Web development presentation
Vaishnavi8950
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
Edureka!
ppt of web development for diploma student
ppt of web development for diploma student
Abhishekchauhan863165
Introduction to asp.net
Introduction to asp.net
SHADAB ALI
Introduction to JavaScript Basics.
Introduction to JavaScript Basics.
Hassan Ahmed Baig - Web Developer
Modern Web Development
Modern Web Development
Robert Nyman
Web Design
Web Design
misterel
Web server
Web server
Touhid Arastu
JAVA SCRIPT
JAVA SCRIPT
Go4Guru
What's hot
(20)
Brief History of JavaScript
Brief History of JavaScript
Complete Lecture on Css presentation
Complete Lecture on Css presentation
Web development | Derin Dolen
Web development | Derin Dolen
Web-Development-ppt (1).pptx
Web-Development-ppt (1).pptx
Introduction to Web Development
Introduction to Web Development
Web browsers and web servers
Web browsers and web servers
Setting up your development environment
Setting up your development environment
Angularjs PPT
Angularjs PPT
TypeScript - An Introduction
TypeScript - An Introduction
Advanced Web Development
Advanced Web Development
Web Development Presentation
Web Development Presentation
Web development presentation
Web development presentation
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
ppt of web development for diploma student
ppt of web development for diploma student
Introduction to asp.net
Introduction to asp.net
Introduction to JavaScript Basics.
Introduction to JavaScript Basics.
Modern Web Development
Modern Web Development
Web Design
Web Design
Web server
Web server
JAVA SCRIPT
JAVA SCRIPT
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 Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
LoriGlavin3
A Framework for Development in the AI Age
A Framework for Development in the AI Age
Cprime
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
LoriGlavin3
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
LoriGlavin3
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Scott Andery
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
BookNet Canada
How to write a Business Continuity Plan
How to write a Business Continuity Plan
Databarracks
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
Raghuram Pandurangan
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
LoriGlavin3
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
DianaGray10
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
panagenda
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance Audit
Skynet Technologies
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
Kari Kakkonen
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
Mydbops
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
Ravi Sanghani
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
Ingrid Airi González
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Curtis Poe
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
IES VE
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
Inflectra
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
Neo4j
Recently uploaded
(20)
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Framework for Development in the AI Age
A Framework for Development in the AI Age
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
How to write a Business Continuity Plan
How to write a Business Continuity Plan
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance Audit
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
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