A kiválasztott változat és az aktuális verzió közötti különbségek a következők.
Következő változat | Előző változat | ||
oktatas:web:javascript:javascript_suetemeny [2019/08/22 19:46] admin létrehozva |
oktatas:web:javascript:javascript_suetemeny [2023/07/31 16:08] (aktuális) admin [JavaScript sütemény] |
||
---|---|---|---|
Sor 3: | Sor 3: | ||
====== JavaScript sütemény ====== | ====== 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 ===== | ||
- | * **Szerző:** Sallai András | + | A süti angolul cookie. A böngészők és a szerverek HTTP |
- | * Copyright (c) Sallai András, 2011, 2013, 2014 | + | protokollal kommunikálnak egymással. A HTTP egy |
- | * Licenc: GNU Free Documentation License 1.3 | + | állapotmentes protokoll. A weboldalakon, azonban sokszor szükség |
- | * Web: http://szit.hu | + | 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 | ||
Sor 15: | Sor 76: | ||
==== Létrehozás ==== | ==== Létrehozás ==== | ||
+ | |||
<code javascript> | <code javascript> | ||
- | document.cookie ="valtozonev=tartalom; expires=Sat, 31 Dec 2011 12:00:00 UTC; path=/"; | + | document.cookie = "adat1=valami"; |
</code> | </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 ==== | ==== Kiolvasás ==== | ||
+ | |||
+ | Az összes süti olvasása: | ||
<code javascript> | <code javascript> | ||
Sor 30: | Sor 104: | ||
</code> | </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és ==== | ||
Törlésnél a múltba állítjuk a lejárati időt. | Törlésnél a múltba állítjuk a lejárati időt. | ||
Sor 36: | Sor 154: | ||
</code> | </code> | ||
- | másként | + | vagy |
<code javascript> | <code javascript> | ||
- | document.setcookie("változónév", "", time()-60,...); | + | document.cookie = "kulcs1=érték1; max-age=0" |
</code> | </code> | ||
+ | |||
===== Munkamenet ===== | ===== Munkamenet ===== | ||
- | A munkamenet cookie egy speciális cookie. Nem adunk meg lejárati időt. | + | |
- | Így a cookie addig él, ameddig a böngészőt ki nem kapcsolják. | + | |
<code javascript> | <code javascript> | ||
- | setcookie("session_id", "12345", 0); | + | sessionStorage.setItem('egy', 'első') |
+ | var res = sessionStorage.getItem('egy') | ||
</code> | </code> | ||
+ | |||
+ | |||