Harjutused 2,3,4,5

Moodle harjutus leht

H 2 Loo Codesandbox-is HTML leht, mis kuvab auto andmeid

Kirjuta pildil olev kood

Lisa muutujasse myjson ja vastavalt ka <div> elementi juurde puuduvad andmed alljärgnevast tabelist

import "./styles.css";

const myJson = {
  Car0: {
    Color: "Rose red",
    "Tinted windows": false,
    Wheels: 4,
    "Roof cargo": null,
    Entertainment: [
      "FM Radio",
      "MP3, MP4 and MKV player",
      "harman/kardon speakers",
    ],
    Accessories: ["satnav", "cruise control"],
  },
  Car1: {
    Color: "Navy blue",
    "Tinted windows": true,
    Wheels: 4,
    "Roof cargo": "Thule",
    Entertainment: [
      "FM Radio",
      "Apple CarPlay/Android Auto",
      "Bowers & Wilkins Premium Sound speakers",
    ],
    Accessories: ["self drive system", "luggage cover"],
  },
};

document.getElementById("app").innerHTML = `
<div id="json">
    <h1>Car 0 properties</h1>
    <p>Color: ${myJson.Car0.Color}</p>
    <p>Tinted windows: ${myJson.Car0["Tinted windows"]}</p>
    <p>Wheels: ${myJson.Car0.Wheels}</p>
    <p>Roof cargo: ${myJson.Car0["Roof cargo"]}</p>
    <p>Audiosystem: ${myJson.Car0.Entertainment[0]}, ${myJson.Car1.Entertainment[1]}</p>
    <p>Accessories: ${myJson.Car0.Accessories[0]}, ${myJson.Car1.Accessories[0]}, ${myJson.Car1.Accessories[1]}</p>
</div>`;

Lõpptulemus 

H 3 sessionStorage

Tee uus käsk sessionStorage.setItem('color','enda lemmikvärv'). Selle käsuga lisati Session Storage’isse uued andmed.
Kirjuta uus käsk sessionStorage.getItem('color') ning näed, et väljastatakse sessionStorage’ist sinu lemmikvärv.

Et näha, mis on Session Storage’isse salvestatud, mine Application>Session Storage>vastav domeen

Nüüd ava veel üks vahekaart ning mine samale lehele (chrome://newtab). Ava uuesti Application>Session Storage ning näed, et see on tühi.

H 4 localStorage

Tee uus käsk localStorage.setItem('car','enda lemmikauto'). Selle käsuga lisati Local Storage’isse uued andmed.

H 5 Küpsised

Ma ei suutnud leida, millised küpsised tagastatakse saidilt terminali või powershelli kaudu, nii et ma kontrollisin internetist muid lahendusi,

Cookieserve – tasuta küpsiste kontrollimise tööriist veebilehtede jaoks

Youtube

X – Twitter

Küpsiste skaneerimise aruanded näitavad, et nii YouTube kui ka X.com kasutavad küpsiseid peamiselt kasutajate tegevuse ja reklaamieelistuste jälgimiseks, kusjuures enamiku küpsiste kestus on umbes 1 aasta.

See sait on väga informatiivne, sest te näete peaaegu igasugust teavet küpsiste kohta, mida sait kasutab.

XH – HTTP päringute tegemiseks, sarnaselt curl’ile või httpie’le

x.com

youtube.com

Ekraanikaadrid näitavad HTTP-vastuse päiseid ja küpsiseid x.com-ile ja youtube.com-le tehtud päringute puhul, paljastades üksikasjad mõlema veebisaidi turvapoliitika, sisukodeerimise ja küpsiste seadete kohta.