The document discusses HTML5 web storage and web workers. Web storage allows data to be stored locally within the browser and accessed across browser sessions. It provides alternatives to cookies for storing data on the client-side. Web workers allow JavaScript processes to run in background threads, improving performance for long-running tasks without blocking the user interface. Communication between the main thread and workers is done asynchronously using messages. Both features have varying browser support that must be checked before using.

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