[[oktatas:web:javascript|< JavaScript]]

====== JavaScript sütemény ======

  * **Szerző:** Sallai András
  * Copyright (c) 2011, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== A sütikről =====

A süti angolul cookie. A böngészők és a szerverek HTTP 
protokollal kommunikálnak egymással. A HTTP egy 
állapotmentes protokoll. A weboldalakon, azonban sokszor szükség
van a weblapok közötti állapot tárolására. 

Általában statisztikákhoz, nyomon követéshez használjuk.

===== Hogyan működik =====

A szerver küld egy süteményt a böngésző számára, amiben adatok vannak.
Ha a böngésző elfogadja a sütit, akkor egyszerű szöveges rekordként tárolja.
A szerver később elkérheti a sütit a böngészőtől. 


A sütik 5 változó hosszúságú mezőből állhatnak:
  * Expires - Az adat mikor jár le. Ha üres, a süti lejár, ha látogató kilép a böngészőből. 
  * Domain - A webhelyed neve.
  * Path - Az útvonal egy könyvtár vagy egy webhely, ahol be van állítva a süti. Ha üresen hagyjuk, a süti tartalma bárhonnan elérhető.
  * Secure - Ha ez a mező tartalmazza a secure szót, akkor csak biztonságos szerverről tölthető le a süti. Ha mező üres, nincs ilyen korlátozás.
  * Name=érték - Kulcs-érték pár.
  

===== A sütik élettartalma =====

Alapértelmezés szerint a sütik a böngésző bezárása után megmaradnak. 
Az élettartamuk szabályozható másodpercekben a max-age attribútummal. 

30 nap beállítása:
<code javascript>
document.cookie = "kulcs1=érték1; max-age=" + 30*24*60*60;
</code>

Az élettartam megadható az expires attribútummal is. 
Az attribútumot GMT/UTC formátumban kell megadni, és nem 
másodpercben.

<code javascript>
document.cookie = "kulcs1=érték1; expires=Fri, 31 Dec 2100 23:59:59 GMT";
</code>

==== Dátum konvertálása ====

Linux alapú rendszeren a dátum konvertálása:
<code javascript>
$ export LANG=en_US; date -R -d "2100-12-31 23:59:59"
Fri, 31 Dec 2100 23:59:59 +0100
</code>
A +0100-t át kell íri GMT-re:
  Fri, 31 Dec 2100 23:59:59 GMT



A napok névvel:
  * Mon
  * Tue
  * Wed
  * Thu
  * Fri
  * Sat
  * Sun


===== Süti =====


==== Létrehozás ====

<code javascript>
document.cookie = "adat1=valami";
</code>


<code javascript>
document.cookie = "igaz=true; expires=Fri, 31 Dec 2021 12:00:00 GMT";
</code>


Az aktuális lapon legyen tárolva (path):
<code javascript>
document.cookie ="valtozonev=tartalom; expires=Sat, 31 Dec 2011 12:00:00 UTC; path=/";
</code>

==== Kiolvasás ====

Az összes süti olvasása:

<code javascript>
document.write(document.cookie);
</code>

<code javascript>
document.write(document.cookie.split("=")[1]);
</code>

Több süti közül az adat1 kiválasztása:
<code javascript>
const cookieValue = document.cookie
  .split('; ')
  .find(row => row.startsWith('adat1'))
  .split('=')[1];


console.log(cookieValue);
</code>

<note important>Vegyük észre az első split() függvényben a ; pontosvessző után a szóközt!</note>


Függvényként:

<code javascript>
function getCookie(name) {
    let result = document.cookie
    .split('; ')
    .find(row => row.startsWith(name))
    .split('=')[1];    
    return result;
}
</code>



Másik lehetőség:
<code javascript>
function getCookie(cname) {
    let ca = document.cookie.split(';');
    let name = cname + "=";
    for(var item of ca) {
        while(item.charAt(0) == ' ') {
            item = item.substring(1);
        }
        if(item.indexOf(name) == 0) {
            return item.substring(name.length, item.length);
        }
    }
    return result;
}
</code>
==== Törlés ====
Törlésnél a múltba állítjuk a lejárati időt.
<code javascript>
document.cookie = "változónév=tartalom; expires=Sun, 31 Dec 2000 12:00:00 UTC; path=/";
</code>

vagy

<code javascript>
document.cookie = "kulcs1=érték1; max-age=0"
</code>

===== Munkamenet =====



<code javascript>
sessionStorage.setItem('egy', 'első')
var res = sessionStorage.getItem('egy')
</code>




===== Linkek =====


A munkamenetre példa a következő helyen, Craig Buckler által:
  * http://blogs.sitepointstatic.com/examples/tech/js-session/session.js

Egy Demo hozzá:
  * http://blogs.sitepointstatic.com/examples/tech/js-session/index.html