필터 주소를 공유했는데 선택이 풀릴 때: GET 폼과 복수값

같은 주소를 열었는데 체크한 항목이 사라집니다

필터 두 개를 고른 결과를 동료에게 보냈는데 첫 항목만 선택돼 있을 수 있습니다. 화면에서는 여러 체크박스를 썼지만 주소를 만들 때 같은 키를 set으로 덮어쓴 경우입니다. 값을 저장하는 규칙과 다시 읽는 규칙이 같은 집합을 표현해야 공유가 됩니다.

예제의 자료 유형은 가이드·도구·사진 세 가지입니다. 복수 선택을 kind라는 반복 키로 보내고 정렬은 sort 한 값으로 보냅니다. 계정이나 개인 정보를 담는 필터가 아닌 공개 자료 목록을 가정합니다.

기본 GET 폼으로 복수값의 모양을 먼저 봅니다

<form method="get">
  <label><input type="checkbox" name="kind" value="guide">가이드</label>
  <label><input type="checkbox" name="kind" value="tool">도구</label>
  <button type="submit">조건 적용</button>
</form>
<!-- 두 항목 선택: ?kind=guide&kind=tool -->

MDN의 form 안내는 GET 방식에서 폼 데이터를 URL에 붙이는 동작을 설명합니다. 공개 조회처럼 상태를 바꾸지 않는 요청에 활용할 수 있습니다. 조회 주소를 먼저 재현할 수 있게 만들면 스크립트가 추가돼도 기본 동작을 대조할 기준이 남습니다.

서버나 문서가 주소를 읽어 같은 선택을 복원해야 합니다. URL에 두 값이 보인다는 것만으로 결과 데이터가 같은 조건을 사용한다고 볼 수는 없습니다. 화면의 체크와 실제 조회 규칙을 함께 연결합니다.

get과 getAll을 다른 목적으로 씁니다

const params = new URLSearchParams(location.search);
const allowed = new Set(['guide', 'tool', 'photo']);
const selected = new Set(
  params.getAll('kind').filter(value => allowed.has(value))
);
document.querySelectorAll('input[name="kind"]').forEach(input => {
  input.checked = selected.has(input.value);
});

getAll은 같은 이름의 값 전체를 배열로 돌려줍니다. 한 값만 필요한 정렬과 복수인 유형에 같은 읽기 함수를 기계적으로 적용하지 않습니다. 허용 목록 밖의 값을 어떻게 처리할지도 정합니다. 예제는 지원하지 않는 유형을 선택에 포함하지 않습니다.

Set으로 중복을 없앤 것은 같은 유형이 여러 번 있어도 한 선택으로 다루기 위한 정책입니다. 순서가 의미인 필터라면 이 결정이 다를 수 있습니다. 문자열 배열이 어떤 의미를 가지는지 먼저 정하고 화면과 조회에 같은 규칙을 적용합니다.

복수값을 만들 때는 기존 집합을 지운 뒤 하나씩 붙입니다

const next = new URL(location.href);
next.searchParams.delete('kind');
for (const value of selected) {
  next.searchParams.append('kind', value);
}

set을 반복하면 마지막 값만 남길 수 있습니다. 반대로 기존 값을 지우지 않고 append만 반복하면 사용자가 한 항목을 해제해도 오래된 값이 남을 수 있습니다. 이 예제에서는 현재 선택을 새 집합으로 보고 해당 키만 다시 구성합니다. 언어처럼 다른 기능에 필요한 쿼리를 전부 지우지는 않습니다.

필터가 바뀌면 페이지 번호도 생각해야 합니다. 이전의 5페이지가 새 결과에는 없을 수 있으므로 조회 조건 변경 시 페이지를 초기화할지 정합니다. 누적 목록과 돌아갈 위치는 목록 범위 복원에서 다루는 별도 상태입니다.

적용·새로고침·직접 주소 진입을 같은 조건으로 읽습니다

검색어나 개인 식별값이 들어가는 주소는 공개 공유의 범위를 따로 검토해야 합니다. URL의 개인정보 분리와 같이 읽을 수 있습니다. 이 글의 목표는 공유한 조회 조건이 다시 열었을 때 같은 선택을 뜻하게 하는 것입니다.

예제를 직접 열어 보기

이 글의 화면 예제와 소스 받기 ZIP. 압축을 푼 뒤 index.html을 브라우저에서 열 수 있습니다. 예제의 입력과 표시 범위는 각 화면의 안내를 기준으로 확인하세요.

참고한 원문

• MDN: URLSearchParams.getAll
• MDN: form