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

VT22 - DA395A - Storage, geolocation & media

VT22 - DA395A - Storage, geolocation & media

Anton Tibblin

April 25, 2022
Tweet

More Decks by Anton Tibblin

Other Decks in Education

Transcript

  1. Localstorage & cookies
    Geolocation
    Mediahantering

    View Slide

  2. Dagens föreläsning
    • Att lagra användardata
    • Cookies
    • LocalStorage
    • Platsinformation
    • Geolocation
    • Google Maps
    • Mediahantering

    View Slide

  3. Del 1 – Att lagra användardata
    Fokus - klientsidan

    View Slide

  4. När finns det anledning att
    spara data om användaren?

    View Slide

  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

    View Slide

  6. Vilka sidor har användaren
    besökt tidigare?

    View Slide

  7. View Slide

  8. View Slide

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

    View Slide

  10. View Slide

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

    View Slide

  12. View Slide

  13. Hur görs detta idag?

    View Slide

  14. View Slide

  15. View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. View Slide

  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

    View Slide

  23. View Slide

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

    View Slide

  25. Demo - Cookies

    View Slide

  26. LocalStorage

    View Slide

  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

    View Slide

  28. Hur använder vi det?

    View Slide

  29. Spara ett värde i localStorage

    View Slide

  30. Hämta ett värde i localStorage

    View Slide

  31. Radera ett värde i localStorage

    View Slide

  32. Ta bort alla värde i localStorage

    View Slide

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

    View Slide

  34. View Slide

  35. View Slide

  36. Demo -
    LocalStorage

    View Slide

  37. Del 2 -
    Geolocation

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  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.

    View Slide

  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

    View Slide

  43. Första exempel

    View Slide

  44. Svar från getCurrentPosition()

    View Slide

  45. Demo – Hämta
    vår position

    View Slide

  46. View Slide

  47. View Slide

  48. Filuppladdning

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  52. https://goo.gl/PGf24I

    View Slide

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

    View Slide

  54. Öppna kamera/ljudinspelare
    automatiskt

    View Slide

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

    View Slide

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

    View Slide

  57. Att visa upp bilder, video, ljud

    View Slide

  58. View Slide

  59. Att visa upp bilder

    View Slide

  60. Video

    View Slide

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

    View Slide

  62. Olika video-widgets i olika webbläsare

    View Slide

  63. Attribut för
    https://www.w3schools.com/tags/tag_video.asp

    View Slide

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

    View Slide

  65. JavaScript API för
    https://www.w3schools.com/tags/ref_av_dom.asp

    View Slide

  66. Ljud

    View Slide

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

    View Slide

  68. Olika ljud-widgets i olika webbläsare

    View Slide

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

    View Slide

  70. JavaScript API för
    https://www.w3schools.com/tags/ref_av_dom.asp

    View Slide

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

    View Slide