Upload
inbal-geffen
View
1.269
Download
3
Tags:
Embed Size (px)
DESCRIPTION
Web Storage & Web Workers
Citation preview
HTML5 Web Storage(DOM storage)
©Inbal Geffen 2012
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
Cookies● Used before HTML5 Web Storage
● 4KB memory limitation per cookie
● Sent in every request
● Have a "bad reputation"
©Inbal Geffen 2012
localStorage vs. sessionStorage
● Data is stored as key/value pairs
● Data is stored in string form
● Use the same API : setItem(), getItem(), clear(), removeItem()
● Fire 'storage' event
In Both
©Inbal Geffen 2012
localStorage vs. sessionStorage
● 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
Differ in scope and lifetime
©Inbal Geffen 2012
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
Web Storage API
//set Item in local storagelocalStorage.setItem("userName", userName);
//can also use immediate set, but this is less recommendedlocalStorage.userName=userName;
//set Item in session storagesessionStorage.setItem("userName", userName);
//can also use the immediate set, but this is less recommendedsessionStorage.userName=userName;
setItem
©Inbal Geffen 2012
Web Storage API
//get Item in local storagevar userName = localStorage.getItem("userName);
//can also use immediate get, but this is less recommendedvar userName = localStorage.userName;
//get Item in session storagesessionStorage.getItem("userName);
//can also use the immediate set, but this is less recommendedvar userName = sessionStorage.userName;
getItem
©Inbal Geffen 2012
Web Storage API
//clear the local storagelocalStorage.clear();
//remove specific item from local storagelocalStorage.removeItem("userName");//localStorage.getItem("userName") => NULL
//clear the session storagesessionStorage.clear();
//remove specific item from session storagesessionStorage.removeItem("userName");
clear(), removeItem
©Inbal Geffen 2012
Web Storage API
● Web Storage is an array
● localStorage.length
● Item in the ith position in the array : localStorage.key(i)
©Inbal Geffen 2012
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
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
HTML5 Web Workers
©Inbal Geffen 2012
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
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
● 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!"); }
Web Workers Support
©Inbal Geffen 2012
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
Main HTML file - create web worker
● Create a new instance of web workerThe 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
Create Web Worker - 2
©Inbal Geffen 2012
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 }
Create Web Worker - 3
©Inbal Geffen 2012
Main HTML file - errors
● Check for errors
// Show errors from the worker worker.onerror = function (error) { alert(error.data); }
Create Web Worker - 4
©Inbal Geffen 2012
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
● 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.
Workers do NOT have access
©Inbal Geffen 2012