HTML JavaScript odbiór parametrów bez zmiany typu – URLSearchParams, sessionStorage, JSON

Pytanie

html, javascript, odbiór parametrów w niezmienionym stanie

Odpowiedź Sztucznej Inteligencji

Bezpośrednia odpowiedź na pytanie

• Najprościej — z adresu URL użyj URLSearchParams, z formularza FormData, a do przekazania/odbioru złożonych struktur pomiędzy podstronami trzymaj je w sessionStorage/localStorage po serializacji JSON.stringify().
• Parametry URL zawsze przychodzą jako string; aby zachować ich „oryginalny” kształt (typ, spójność kodowania) trzeba świadomie:
  • kodować przy wysyłaniu encodeURIComponent()
  • odbierać ► ewentualnie dekodować ► konwertować typ (np. Number(), JSON.parse()).
• Tylko Web-Storage (lub cookies/IndexedDB) pozwala odebrać wielowymiarowe obiekty 1-do-1 po JSON.parse() – wtedy stan jest faktycznie „niezmieniony”.

Szczegółowa analiza problemu

1. Źródła parametrów w aplikacjach front-end

1.1 Query string (?id=12&status=ok)
1.2 Hash fragment (#step=3)
1.3 Ciało formularza (POST / GET)
1.4 Web-Storage (localStorage, sessionStorage)
1.5 Cookies / Service-Worker Cache / IndexedDB (rzadziej do krótkotrwałego routingu)
1.6 API inter-component (np. postMessage, BroadcastChannel) – SPA

2. Zachowanie integralności

3. Typowe implementacje

3.1 URL (proste flagi, identyfikatory)

// wysyłka
const q = `product=${encodeURIComponent(prodId)}&view=${mode}`;
location.href = `details.html?${q}`;
// odbiór
const p = new URLSearchParams(location.search);
const id      = Number(p.get('product'));   // konwersja
const view    = p.get('view');              // string

3.2 Złożony obiekt (koszyk, konfigurator) – sessionStorage

// zapisz
sessionStorage.setItem('cart', JSON.stringify(cartObj));
// przejdź
location.href = 'checkout.html';
// odbiór
const raw = sessionStorage.getItem('cart');
const cart = raw ? JSON.parse(raw) : null;

3.3 Wielokrotne wartości / tablice w URL

// ?tag=js&tag=html  lub  ?tag[]=js&tag[]=html
[...p.getAll('tag')];    // ['js','html']

3.4 Hash router w SPA

addEventListener('hashchange', () => {
  const state = Object.fromEntries(new URLSearchParams(location.hash.slice(1)));
});

4. Obsługa znaków specjalnych

• encode przy wysyłce: encodeURIComponent, unika kolizji z &, ?, #.
• decode przy odbiorze: decodeURIComponent wywoływany implicite w URLSearchParams.
• UTF-8 ⇒ zawsze percent-encoded; unikaj escape() (przestarzała).

5. Test integralności

function assertEqual(src, rx) {
  console.assert(JSON.stringify(src) === JSON.stringify(rx), 'Dane zmienione!');
}

Uruchom na końcu procesu przekazywania.

6. Przełączanie typów (loss-less)

• Liczby: Number(v) lub parseInt/parseFloat
• Boole: v === 'true'
• Obiekt w URL: JSON.parse(p.get('cfg')) z wcześniej encodeURIComponent(JSON.stringify(cfg))

Aktualne informacje i trendy

• Powszechna adopcja interfejsu URL / URLSearchParams (pełne wsparcie we wszystkich Evergreen browsers).
• history.pushState()/replaceState() + popstate – dynamiczna zmiana parametrów bez przeładowania.
• Rozwój bibliotek do serializacji stanu w routerach SPA (react-router, vue-router, Angular) – automatycznie typują parametry.
• Web-Storage powoli uzupełniany przez IndexedDB i Storage Foundation API (większe, transakcyjne).
• Coraz częściej stosuje się „schema-based query params” (np. zodios, serde-qs) by walidować i odtwarzać typy w TypeScript.

Wspierające wyjaśnienia i detale

• Pass-by-value vs reference (odpowiedź online #2) dotyczy przekazywania w RAM-ie, nie w URL; ważne tylko gdy udostępniasz obiekt między funkcjami, a nie między zakładkami.
• CEF4Delphi (odpowiedź online #1) jest kontekstem desktop-embed, nie typowego HTML/JS – pomijamy, chyba że piszesz hybrydę.

Aspekty etyczne i prawne

• Dane osobowe ⇒ unikaj localStorage (łatwy dostęp JS). Zamiast tego cookie + HttpOnly lub sesja serwerowa.
• RODO/GDPR wymaga poinformowania użytkownika o przechowywaniu danych w Web-Storage; brak centralnego mechanizmu „wyczyść” ⇒ musisz zapewnić UI „Usuń moje dane”.
• Ochrona XSS: każda możliwość zapisu do DOM-u powinna escape’ować, bo z localStorage atakujący może wstrzyknąć payload.

Praktyczne wskazówki

• Twórz pojedynczy „serwis” (klasę) obsługujący parametry – unikniesz duplikacji konwersji.
• Stosuj TypeScript z generics: getParam<T extends number|string|boolean>() + guardy.
• Zadbaj o fallback dla starszych IE < 11 (brak URLSearchParams) – polyfill lub własny parser.
• Dodawaj wersjonowanie struktur w localStorage (cart_v2) by móc bezpiecznie migrować.

Ewentualne zastrzeżenia lub uwagi dodatkowe

• Web-Storage współdzieli przestrzeń z subdomenami (same origin) – testuj kolizje.
• Limit długości URL zależy od przeglądarki; IE stare ≈ 2083 znaki, Edge/Chrome ≥ 32 kiB, ale proxy/CDN potrafią ciąć.
• Parametry w hash nie są wysyłane na serwer – dobra praktyka dla SPA, ale utrudnia SEO.

Sugestie dalszych badań

• Structured Clone & Transferable objects (postMessage, SharedArrayBuffer) dla zaawansowanego współdzielenia stanu.
• Web Crypto API → szyfrowanie danych trzymanych w localStorage.
• URL Pattern API (proposal) – deklaratywne mapowanie routingu do parametrów.
• Biblioteki query-string, qs, superjson (zachowuje daty, mapy, sety).

Krótkie podsumowanie

Aby odebrać parametry „w niezmienionym stanie”:

1. Proste flagi → URLSearchParams + konwersja typów.
2. Złożone dane → sessionStorage/localStorage z JSON.stringify/parse.
3. Dbaj o kodowanie (encodeURIComponent) i walidację typów przy odbiorze.
4. Pamiętaj o bezpieczeństwie: XSS, RODO, ograniczenia rozmiaru URL.
   Stosując powyższe zasady zapewnisz, że dane przechodzące pomiędzy stronami lub komponentami front-endu zachowają integralność i będą użyte dokładnie w takim stanie, w jakim zostały przekazane.