웹 애플리케이션을 개발하다 보면 사용자가 입력한 필터링된 데이터를 다른 페이지로 전달해야 하는 경우가 있습니다. 이를 위해 URL 매개변수나 세션을 활용할 수 있습니다. 아래에서는 각 방법에 대해 간단히 설명하겠습니다.

URL 매개변수

URL 매개변수를 사용하면 필터링된 데이터를 URL에 포함하여 다른 페이지로 전달할 수 있습니다. 예를 들어, 사용자가 선택한 필터 옵션을 URL에 추가하여 다른 페이지로 이동하는 경우입니다.

// 예시 URL: http://example.com/products?category=electronics&brand=samsung

JavaScript로 URL 매개변수를 파싱하여 데이터를 추출할 수 있습니다.

const urlParams = new URLSearchParams(window.location.search);
const category = urlParams.get('category');
const brand = urlParams.get('brand');

세션

다른 방법으로는 세션을 활용하여 필터링된 데이터를 다른 페이지로 전달할 수 있습니다. 사용자가 선택한 필터 옵션을 세션에 저장한 후, 다른 페이지에서 해당 세션을 조회하여 필터링된 데이터를 사용할 수 있습니다.

// 필터링된 데이터를 세션에 저장
sessionStorage.setItem('category', 'electronics');
sessionStorage.setItem('brand', 'samsung');

// 다른 페이지에서 세션 데이터 사용
const category = sessionStorage.getItem('category');
const brand = sessionStorage.getItem('brand');

이러한 방법을 사용하여 필터링된 데이터를 효과적으로 다른 페이지로 전달할 수 있습니다.

결론

웹 애플리케이션에서 필터링된 데이터를 다른 페이지로 전달하는 방법은 URL 매개변수와 세션을 활용하는 것이 흔한데, 각각의 방법은 상황에 맞게 적절히 선택하여 사용할 수 있습니다. 데이터의 민감도나 보안성 등을 고려하여 적합한 전략을 선택하는 것이 중요합니다.

참고 자료

MDN web docs - URLSearchParams

MDN web docs - sessionStorage