VT22 - DA395A - Storage, geolocation & media

Transcript

1. Localstorage & cookies Geolocation Mediahantering
2. Dagens föreläsning • Att lagra användardata • Cookies • LocalStorage • Platsinformation • Geolocation • Google Maps • Mediahantering
3. Del 1 – Att lagra användardata Fokus - klientsidan
4. När finns det anledning att spara data om användaren?
5. Exempel på intressant användardata • För att komma ihåg lokala inställningar, t.ex. • För att spara ”gammal” data, t.ex. från ajax-anrop • För att snabba upp webbapplikationen • För att analysera en användares beteende
6. Vilka sidor har användaren besökt tidigare?
9. Vilka inställningar har användaren gjort vid tidigare besök?
11. Finns det klientdata, t.ex. listor, som vi vill spara?
13. Hur görs detta idag?
16. Cookies Egenskaper • Skickas med till servern automatiskt vid HTTP-anrop • Kan användas för hela domäner (inkl. subdomäner), eller specifika delar av en webbplats • Kan kräva säker anslutning (SSL) • Utgångsdatum Nackdelar • Är väldigt små (4kb) • Skickas med vid varje anrop till servern • En enda text-sträng • Jobbiga att jobba med i JavaScript
17. https://www.twilio.com/blog/wp-content/uploads/2014/06/6-19-2014-10-43-17-PM.png
18. https://www.twilio.com/blog/wp-content/uploads/2014/06/6-19-2014-10-44-43-PM.png
19. Hur skriver man cookie? Bra läsning: https://www.w3schools.com/js/js_cookies.asp
20. Hur skriver man en cookie? (2) Mer bra läsning: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
22. Att tänka på • Cookies behöver köras på en server • EU-direktivet om att upplysa användaren att man sparar data • http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32009L0136 • Säkerhetsaspekter • CSRF • Session hijacking • Läs gärna mer här: https://developer.mozilla.org/en- US/docs/Web/HTTP/Cookies#Security
24. Hjälpmedel för att jobba med Cookies
25. Demo - Cookies
26. LocalStorage
27. LocalStorage Fördelar • Egenskaper i ett objekt (nyckel/värde) • Inget utgångsdatum • Lokal till sin subdomän • Cirka 5mb Nackdelar • Fungerar inte alltid i äldre webbläsare • Svårare för användare att ta bort • Bara strängar
28. Hur använder vi det?
29. Spara ett värde i localStorage
30. Hämta ett värde i localStorage
31. Radera ett värde i localStorage
32. Ta bort alla värde i localStorage
33. Om vi vill spara mer än en sträng…
36. Demo - LocalStorage
37. Del 2 - Geolocation
41. Geolocation • JavaScript gör det möjligt för oss att ta reda på enhetens position. • Det krävs att användaren godkänner att vi får ta del av dennas position • Vissa (alla?) webbläsare kräver https • Får svar i form av koordinatorer m.m.
42. Funktion - getCurrentPosition • Den vanligaste funktionen som används är: • getCurrentPosition • Den kallas genom JavaScript-objektet ”navigatior” • navigator.geolocation.getCurrentPosition(); • Funktionen tar 3st parametrar • Funktion för success • Funktion för fail • Egenskaper att skicka med • navigator.geolocation.getCurrentPosition( onSuccess, onFail, {enableHighAccuracy: true} ); • OBS anropet sker asynkront
43. Första exempel
44. Svar från getCurrentPosition()
45. Demo – Hämta vår position
48. Filuppladdning
49. Att ladda upp filer genom HTML • Vi behöver ett formulär!
50. Men användaren kan ju välja vilken filtyp som helst?
51. Kom ihåg! - Olika typer av input!
52. https://goo.gl/PGf24I
53. https://www.w3schools.com/TAGs/att_input_accept.asp
54. Öppna kamera/ljudinspelare automatiskt
55. https://www.w3.org/TR/html-media-capture/
56. https://goo.gl/0ZzS2U Demo på detta.
57. Att visa upp bilder, video, ljud
59. Att visa upp bilder
60. Video
61. Att visa upp video https://www.w3schools.com/html/html5_video.asp
62. Olika video-widgets i olika webbläsare
63. Attribut för <video> https://www.w3schools.com/tags/tag_video.asp
64. Support för video i olika webbläsare https://www.w3schools.com/tags/tag_video.asp
65. JavaScript API för <video> https://www.w3schools.com/tags/ref_av_dom.asp
66. Ljud
67. Att visa upp ljud https://www.w3schools.com/html/html5_audio.asp
68. Olika ljud-widgets i olika webbläsare
69. Support för ljud i olika webbläsare https://www.w3schools.com/html/html5_audio.asp
70. JavaScript API för <video> https://www.w3schools.com/tags/ref_av_dom.asp
71. Demo av ljud, bild, video https://www.w3schools.com/TAGs/ref_av_dom.asp