LocalStorage - GeoLocation - Media

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. Användningsområden
• Inloggning
• Kundvagnar
• Resultat (i spel m.m.)
• Eller annat som server bör komma ihåg
Sessionshantering
• Användarinställningar
• Teman
• Andra inställningar
Personalisering
• Hålla koll och spåra användares
beteende
Tracking

17. 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

18. https://www.twilio.com/blog/wp-content/uploads/2014/06/6-19-2014-10-43-17-PM.png

19. https://www.twilio.com/blog/wp-content/uploads/2014/06/6-19-2014-10-44-43-PM.png

20. Hur skriver man cookie?
Bra läsning: https://www.w3schools.com/js/js_cookies.asp

21. Hur skriver man en cookie? (2)
Mer bra läsning: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

23. 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

25. Hjälpmedel för att jobba med Cookies

26. Demo - Cookies

27. LocalStorage

28. 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

29. Hur använder vi det?

30. Spara ett värde i localStorage

31. Hämta ett värde i localStorage

32. Radera ett värde i localStorage

33. Ta bort alla värde i localStorage

34. Om vi vill spara mer än
en sträng…

37. Demo -
LocalStorage

38. Del 2 -
Geolocation

42. 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.

43. 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

44. Första exempel

45. Svar från getCurrentPosition()

46. Demo – Hämta
vår position

49. Filuppladdning

50. Att ladda upp filer genom HTML
• Vi behöver ett formulär!

51. Men användaren
kan ju välja vilken
filtyp som helst?

52. Kom ihåg!
- Olika typer av input!

53. https://goo.gl/PGf24I

54. https://www.w3schools.com/TAGs/att_input_accept.asp

55. Öppna kamera/ljudinspelare
automatiskt

56. https://www.w3.org/TR/html-media-capture/

57. https://goo.gl/0ZzS2U
Demo på detta.

58. Att visa upp bilder, video, ljud

60. Att visa upp bilder

61. Video

62. Att visa upp video
https://www.w3schools.com/html/html5_video.asp

63. Olika video-widgets i olika webbläsare

64. Attribut för <video>
https://www.w3schools.com/tags/tag_video.asp

65. Support för video i olika webbläsare
https://www.w3schools.com/tags/tag_video.asp

66. JavaScript API för <video>
https://www.w3schools.com/tags/ref_av_dom.asp

67. Ljud

68. Att visa upp ljud
https://www.w3schools.com/html/html5_audio.asp

69. Olika ljud-widgets i olika webbläsare

70. Support för ljud i olika webbläsare
https://www.w3schools.com/html/html5_audio.asp

71. JavaScript API för <video>
https://www.w3schools.com/tags/ref_av_dom.asp

72. Demo av ljud, bild,
video
https://www.w3schools.com/TAGs/ref_av_dom.asp

73. IA-dag VT23 SYS Alumnmiddag