2 of 6

Sessions X local storage X session storage X cookies

Local storage je úložiště na klientovi (ve webovém prohlížeči), kam si stránka může skriptem uložit libovolná data a potom je skriptem zase načíst. Přístup z klientského skriptu je přitom jediný možný. Data žijí jenom na klientově počítači, nepřenášejí se na server (za předpokladu, že si takový přenos sami nenaskriptujete).

Webová aplikace si takto může uložit poměrně velké množství dat a to na dlouhou dobu, prakticky na věky. Přesněji dokud si uživatel nesmaže data nebo nepřeinstaluje počítač.

Nejsou. Jedná se o zcela samostatnou technologii, která se cookies podobá v jednom jediném aspektu: ukládá si nějaká trvalejší data na klienta. Dva hlavní rozdíly jsou následující:

Velikost cookies je hodně omezená. Omezení nejsou úplně jednoduchá, ale obecně se jedná o několik kilobajtů. Local Storage má v současných prohlížečích 5 MB.
Cookies se posílají při každém HTTP požadavku na server. To je dobře i špatně. Dobře to je, protože s nimi můžete pracovat na serveru. Špatně je to, protože tím narůstá objem přenášených dat, což v případě velkého objemu cookies a počtu návštěv může být velmi problematické (mimo jiné z tohoto důvodu se pro Content Delivery Networks používá jiná doména, než je mateřská, např. Facebook má fbcdn.com, Microsoft aspnetcdn.com atd.).

Nejsou to cookies?

Session Storage – jedná se o Local Storage, jejíž obsah se ztratí při ukončení session, tedy při zavření okna prohlížeče (podobně jako u session cookies). Jinak úplně všechno, co platí o Local Storage platí i pro Session Storage.

Session řeší problém bezstavovosti protokolu HTTP, udržíme pomocí ní informace o stavu aplikace a práci uživatele sní. Místo pojmu session se také někdy používá český termín "relace“. V session můžeme mít spoustu proměnných (parametrů), které bychom jinak museli předávat (a tedy i přenášet) v URL, což je nejen pracné, ale v případě některých parametrů také ne zrovna bezpečné. Pokud máme proměnné v relaci, tyto se vůbec nepřenášejí mezi serverem a počítačem klienta, skript na serveru je dostává přímo z interpretu PHP. Doporučeno je využití superglobální proměnné $_SESSION.

Není session jako session!

3 of 6

Zadání

Časová dotace: 90 minut

Forma práce: Dvojice (rozdělte si práci na frontend/backend!)

Povolené nástroje: Cokoliv (včetně Gemini, ChatGPT, Claude atd.). Za funkčnost a obhajobu kódu ale ručíte vy jako tým.

Vaše výchozí situace:

Váš bývalý kolega byl vyhozen. Zanechal po sobě rozpracovaný kód (index.php), který funguje jen napůl, obsahuje obrovské bezpečnostní díry (žádná ochrana proti SQL Injection a XSS) a vypadá příšerně. Vaším úkolem je kód zabezpečit, zrefaktorovat (rozšířit do více souborů) a přidat logiku podle e-mailu od klienta.

4 of 6

Dosavadní SQL tabulka

CREATE DATABASE IF NOT EXISTS hackathon_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

USE hackathon_db;

CREATE TABLE ucastnici (

id INT AUTO_INCREMENT PRIMARY KEY,

jmeno VARCHAR(255) NOT NULL,

tym VARCHAR(50) NOT NULL,

role VARCHAR(50) NOT NULL,

cas_registrace TIMESTAMP DEFAULT CURRENT_TIMESTAMP

);

INSERT INTO ucastnici (jmeno, tym, role) VALUES

('Jan Novák', 'Tým Alfa', 'Frontend'),

('Petr Svoboda', ' tym alfa ', 'Backend'),

('Eva Zelená', 'TÝM ALFA', 'frontend'),

('Karel Malý', 'Tým Beta', 'Fullstack');

5 of 6

📩 Email od zadavatele:

Předmět: Nový projekt – Hackathon (Základní vizuál)

Ahoj týme,

rozjíždíme registraci na Hackathon. Databázář vám už poslal SQL skript s prvotními daty, tak si to naimportujte.

Pro začátek chci jen formulář a výpis. Ať tam je Jméno a příjmení, Tým (na výběr Alfa, Beta, Gama) a Role (Frontend, Backend, Fullstack, Grafik). Pod tím tlačítko Odeslat.

Dole pod formulářem ať se rovnou vypisují lidé z databáze do nějakých hezkých CSS karet vedle sebe (použijte flexbox nebo grid, ať to nevypadá jak z pravěku). Kód mi rozdělte hezky do index.php a style.css. Žádné php ukládání zatím neřešte, chci vidět, že to hezky vypadá a načítá to data!

Karel

1 of 6

2 of 6

3 of 6

4 of 6

5 of 6

6 of 6