JavaScript를 사용하여 선택한 확인란을 다른 페이지에 표시하시겠습니까?

이 기사에서는 JavaScript를 사용하여 다른 페이지의 모든 확인란을 가져오는 방법을 배웁니다. 확인란은 선택 유형, 즉 참 또는 거짓인 이진 선택 유형입니다. 이는 페이지에 표시되는 GUI 형태의 옵션으로, 이를 통해 사용자로부터 더 많은 입력을 얻을 수 있습니다. 상자가 선택되어 있으면 사용자가 값을 선택했음을 의미하고, 선택을 취소하면 사용자가 값을 선택하지 않았음을 의미합니다.

체크박스와 라디오 버튼의 차이점은 라디오 버튼을 사용하면 사용자가 하나의 값만 선택할 수 있는 반면, 체크박스를 사용하면 사용자는 여러 값을 선택할 수 있다는 것입니다.

체크박스 예시

으아아아

위 출력에서 상자가 선택되어 있는 것을 볼 수 있습니다. 이는 사용자가 값을 선택했음을 나타냅니다.

JSON.parse() 메서드는 항상 문자열 형식의 인수를 사용합니다(즉, 값을 작은따옴표로 묶어야 함).

예

프로그램 예를 살펴보겠습니다:

으아아아

출력에서 동일한 페이지의 경고 메시지에 지정된 선택된 확인란을 인쇄하고 있음을 확인할 수 있습니다. 그 전에 먼저 로컬 스토리지의 개념을 이해해보자.

JavaScript에서 로컬 저장소 사용

LocalSorage는 웹 브라우저의 데이터 저장 유형입니다. 데이터는 이 웹사이트를 사용하여 저장할 수 있으며 데이터는 항상 저장소에 남아 있으며 브라우저를 닫아도 사라지지 않습니다.

또 다른 옵션은 사이트 데이터를 저장하는 데에도 사용되는 쿠키입니다. 이 저장 한도는 약입니다. 브라우저에서는 2Mb이고 localStorage에는 쿠키 저장 크기 측면에서 더 큰 5Mb 저장 공간이 제공됩니다

localStorage를 효과적이고 안전하게 사용하기 위해 사용자가 기억해야 할 몇 가지 용어가 있습니다.

• 사용자가 공개적으로 공유해서는 안 되는 비밀번호 및 기타 정보와 같은 민감한 데이터를 저장하는 것은 안전하지 않습니다.

• 데이터는 서버가 아닌 브라우저 자체에 저장되나요? 그리고 해당 작업은 동기식입니다. 즉, 하나의 작업이 순차적으로 처리됩니다.

• 쿠키 저장 용량에 비해 데이터 저장 용량이 더 큽니다.

• 거의 모든 최신 브라우저가 이를 지원하며 최신 버전과 호환됩니다.

LocalStorage 브라우저 호환성 확인

브라우저가 localStorage를 지원하는지 확인하려면 브라우저 콘솔에서 다음 코드를 실행하세요. 정의되어 있지 않으면 브라우저가 localStorage를 지원한다는 의미입니다.

예

으아아아

사용된 localStorage 방법

1. 세트아이템()

이 방법은 저장소에 데이터를 추가하는 데 사용됩니다. 데이터를 추가하기 위해 이 메소드에 키와 값을 전달합니다.

으아아아

2. 아이템 획득()

이 방법은 저장소에 있는 데이터를 가져오거나 검색하는 데 사용됩니다. 해당 키와 연결된 값을 가져오기 위해 이 메서드에 키를 전달합니다.

으아아아

3. 항목 삭제()

이 방법은 저장소에 있는 특정 데이터를 삭제하는 데 사용됩니다. 이 메소드에 키를 전달하면 스토리지에 데이터로 존재하는 키-값 쌍이 삭제됩니다.

으아아아

4. 클리어()

이 방법은 저장소에 존재하는 로컬 저장소 데이터를 지우는 데 사용됩니다.

으아아아

팁: localStorage의 크기를 확인하려면 브라우저 콘솔에서 다음 구문을 실행할 수 있습니다

으아아아

이 값을 다른 페이지로 보내보겠습니다. 먼저 선택된 모든 확인된 값을 setItem()을 사용하여 로컬 저장소에 추가하고 다음 페이지에서는 getItem() 메서드를 사용하여 값을 가져옵니다.

로컬 스토리지에 가치를 더하는 JavaScript 기능은

으아아아

여기에서 items 변수의 모든 체크박스 항목을 가져오고 arr 배열에 true로 표시된 모든 항목을 추가하여 사용자가 해당 항목을 선택했음을 나타냅니다. 로컬 스토리지에 어레이를 추가합니다.

두 번째 페이지의 저장소에서 값을 검색하는 JavaScript 함수

으아아아

여기서 배열 arr은 키 값과 함께 저장소에서 검색된 값을 저장합니다. selected item이라는 빈 문자열 변수를 가져온 다음 모든 배열 항목을 추가합니다. 마지막으로 그 자리에 ID 결과를 인쇄합니다.

page1.html

으아아아

page2.html

으아아아

출력에서 첫 번째 페이지 page1.html에 모든 항목이 표시되고 사용자가 선택한 목록에서 항목을 선택하면 선택한 모든 값이 키 이름 value 를 사용하여 저장소에 추가되는 것을 볼 수 있습니다. 사용자가 제출 버튼을 누르면 다음 페이지(예: page2.html)로 리디렉션됩니다. 2페이지에서 프로그램은 키 값을 사용하여 저장소에서 사용자가 선택한 값을 가져오고 배열을 반복하면서 최종 값을 추가하고 인쇄합니다.

위 내용은 JavaScript를 사용하여 선택한 확인란을 다른 페이지에 표시하시겠습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!