Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DA355A - Cookies, LocalStorage, GeoLocation, Media

DA355A - Cookies, LocalStorage, GeoLocation, Media

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

April 26, 2021
Tweet

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?

  7. None
  8. None
  9. Vilka inställningar har användaren gjort vid tidigare besök?

  10. None
  11. Finns det klientdata, t.ex. listor, som vi vill spara?

  12. None
  13. Hur görs detta idag?

  14. None
  15. None
  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

  21. None
  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
  23. None
  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…

  34. None
  35. None
  36. Demo - LocalStorage

  37. Del 2 - Geolocation

  38. None
  39. None
  40. None
  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

  46. None
  47. None
  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

  58. None
  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