Web Storage, etc.

1. Web Storage, etc. CS/COE 1520 Jarrett Billingsley

2. Today: • sorry about canceling last week's class • that hasn't happened in a while. • today we'll talk about web storage… • but that's a small topic, so some adjacent things too • and event handling • and…

3. let and const

4. var is old news. • var behaves… strangely. not really how you might expect it to. function f() { if(true) { // x is in the braces var x = 'hello' } console.log(x) // huh?? } variables declared with var are function-scoped, not block-scoped like most languages. each function AR keeps its locals in an object. var adds properties to that object. this works, and prints hello. y tho

5. You can even do this??? • who cares about order? function g() { x = 10 // ??? console.log(x) var x } yeah… I dunno either. so, no more var. var

6. From var to let • let is the new way to declare variables, and it makes sense. function f() { if(true) { let x = 'hello' } console.log(x) // error } function g() { x = 10 // error console.log(x) let x } you can also use const, which works like Java's final. (you can't change what value the variable holds, but if it's an object, you can change its contents)

7. One more thing… • let/const variables are superior in one more way. let a = [] for(var i = 0; i < 3; i++) a.push(() => i) for(let f of a) console.log(f()) // 3,3,3 , , , , i = 3 let a = [] for(let i = 0; i < 3; i++) a.push(() => i) for(let f of a) console.log(f()) // 0,1,2 i = 0 i = 1 i = 2

8. Web Storage

9. Well maybe it should be called "Browser Storage" • the whole concept of the internet is kind of… insecure. Firefox is better than Chrome ha ha shady code Your hard drive NO NOT REALLY do you really want these random programs accessing all your data? but storing data on the client computer is useful…

10. Cookies • cookies are tiny client-side pieces of data, associated with a site. • every time you make a request, the cookies are sent with it. they're often used for keeping you logged into a site. but cookies are very limited in size, and we don't really want to be sending that data to the server every time… you can think of them like a "temporary ID card." they're also often used to watch everything you do online, so that thousands of companies with nothing better to do can "target" their ads, so that you can get the same goddamn car insurance ads you've seen for 30 years but now they know everything about your browsing habits and can probably personally identify you.

11. The Storage API (animated) • a Storage object is a simple map from strings to strings. s.length 3 s.getItem('numCats') "1" s.getItem('flerp') null s.setItem('a', 'b') that's it! s.removeItem('a') s.clear()

12. Local storage • your browser stores one of these maps for each domain. • you access it in JS through window.localStorage the space is limited, often by a user setting, but under ~5MB is fine for most cases. private/incognito browsing windows throw out the local storage when closed.

13. Session storage • similar to local storage, but cleared when a "browsing session" ends Tab1 Tab1 Tab1 Tab1 Tab2 open a link in the same tab? same browsing session yaaaay click here! open a link in a new tab? new browsing session click here! nooooo opening a page from scratch is a new session. closing and "undo close" keeps the same session.

14. What's it good for? • convenience, mostly. • it lets you carry data from page to page unlike global variables, and without the need for the server to be involved. • it also lets you, say, preserve the values of fields so that if the user accidentally goes back/refreshes, they can be restored.

15. IndexedDB • we won't get into this, but just so you're aware of it… • there's a more powerful transactional database API for storing more complex client-side data called IndexedDB • so uh, look that up if you're curious.

16. JSON

17. It's said "Jason" • JSON (JavaScript Object Notation) is a common interchange format • a standardized way of storing and sending data allowed values: { "x": 10, "name": "Jarrett", "teacher": true, "cats": ["Darlene"] } { "x": 10 } objects • [1, 2, 3] arrays • 4.596 numbers "haaaay" strings true booleans null null if you use Sublime or Atom, have a look at the settings files. they're JSON. that's it!

18. Storage! • since the Storage API expects all values to be strings… • JSON is a natural fit. JSON.stringify({ x: 10 }) '{"x": 10}' it really is that simple. JSON.parse('{"x": 10}') more complex objects might need to do a little more work to be turned into/from JSON. { x: 10 }

19. DOM Events

20. Stuff that was SUPPOSED to be in the DOM lecture • in event-driven programming, you don't poll for user input. • instead, you're notified asynchronously when it happens. an event listener function that you wrote is called. Login function login(e) { playASoundEffect() checkInputFields() doTheLoginStuff() } when the user interacts with your page somehow…

21. The DOM event model • there are many, many kinds of events. • clicking, hovering, dragging, touching, typing, dropping files… • every element in the DOM can have a listener for each type of event. you can see attached event listener in the inspector's DOM view.

22. Attaching event listeners • there are three-ish ways to do it <html onload="doneLoading()"> in the HTML… window.onload = doneLoading in JS with a property… window.addEventListener('load', doneLoading) the property syntax is mostly okay, it's just less flexible. or with this method.

23. Who wins? • since the DOM is a tree, and every element can have a listener… • what if a parent and a child have a listener for the same event? onclick <article> <img> Explorer and Netscape had different ideas, and now we have both onclick either the image's listener runs before the article's (bubbling)… It's a flower! or the article's listener runs before the image's (capturing). amazingly, Explorer's idea (bubbling) is better, and is now the default.

24. Stopping propagation • often you don't want multiple listener to fire. • each listener gets a parameter containing an event object. function clickedImage(event) { } varimg = event.target event.stopPropagation() its target property gives you the DOM element that the event fired on. the stopPropagation() method will make it so no other listeners will be called after this one.