DOM에 데이터를 저장하는 방법은 무엇입니까?

DOM에 데이터를 저장한다는 것은 데이터를 일반 텍스트 형식으로 저장한다는 의미입니다. 예를 들어, React나 다른 반응 프레임워크를 사용하는 동안 상태 변수에 데이터를 저장합니다. 사용자가 입력 필드의 데이터를 업데이트하면 업데이트된 데이터가 상태 변수에 저장됩니다.

그래서 양식을 제출하기 전에 상태 변수에 데이터를 저장합니다. 양식이 제출되면 상태 변수의 값을 사용합니다.

일반 JavaScript에서는 데이터를 일반 텍스트 형식으로 저장하는 것과 같은 작업을 수행할 수 있으며 양식을 제출해야 할 때마다 입력 필드에서 데이터를 가져오는 대신 DOM에서 데이터를 가져올 수 있습니다.

여기에서는 JavaScript와 Jquery를 사용하여 DOM에 데이터를 저장하는 방법을 알아봅니다.

JavaScript를 사용하여 DOM에 데이터 저장

JavaScript에서는 데이터를 저장할 객체를 만들 수 있습니다. 데이터를 일반 텍스트 형식으로 개체에 저장하고 필요할 때 개체에서 가져올 수 있습니다.

문법

사용자는 JavaScript를 사용하여 다음 구문에 따라 DOM에 데이터를 저장할 수 있습니다.

으아아아

위 구문에서는 데이터를 저장하기 위해 data_obj 객체를 생성하고 해당 값을 업데이트할 수 있습니다.

예

아래 예에서는 두 개의 입력 필드가 있는 양식을 만들었습니다. 또한 각 입력 필드에 이름을 지정했습니다. 사용자가 데이터 저장 함수를 클릭할 때마다 입력 값을 가져와 객체에 저장하는 storeInDOM() 함수를 호출합니다. 사용자가 "저장된 데이터 가져오기" 버튼을 누를 때마다 data_obj 개체의 데이터에 액세스하는 getFromDOM() 함수가 호출됩니다.

으아아아

출력에서 사용자는 저장된 데이터를 볼 수 있습니다.

jQuery를 사용하여 DOM에 데이터 저장

jQuery에는 data() 메서드를 사용하여 호출할 수 있는 데이터 API가 포함되어 있습니다. 특정 요소에 대한 데이터를 저장할 수 있습니다. 두 개의 매개변수를 데이터 API에 전달하면 특정 요소에 대한 데이터가 저장됩니다. 그렇지 않으면 특정 요소에 대해 저장된 데이터가 반환됩니다.

문법

사용자는 Jquery의 data() 메서드를 사용하여 다음 구문에 따라 DOM에 데이터를 저장할 수 있습니다.

으아아아

CSS 식별자는 위 구문에서 요소를 선택하는 데 사용됩니다. data() 메소드는 키를 첫 번째 매개변수로, 관련 값을 두 번째 매개변수로 사용합니다.

예

양식에는 아래 예와 같이 이메일과 비밀번호 입력 필드가 포함되어 있습니다. 사용자가 데이터를 저장하기 위해 버튼을 누를 때마다 Jquery를 사용하여 입력된 값을 가져와 data() 메서드를 사용하여 특정 요소의 DOM에 저장합니다. 여기서 $("#email").data("email", email)은 이메일과 동일한 ID로 입력에 액세스하고 'email'을 키로 저장하고 입력 값을 'email' 키 값으로 저장합니다. p>

따라서 data() 메서드를 사용하여 모든 요소를 ​​참조로 사용하여 키-값 쌍을 저장할 수 있으며, 사용자도 데이터에 액세스할 때 동일한 요소를 참조로 사용해야 합니다.

으아아아

사용자는 DOM에 데이터를 저장하는 방법을 배웠습니다. 그러나 DOM에 데이터를 저장하는 것은 일시적이기 때문에 나쁜 습관입니다. 사용자는 브라우저의 로컬 또는 세션 저장소를 사용하여 데이터를 저장할 수 있으며 구문은 간단합니다.

JQuery에서 사용자는 데이터 API를 사용하여 특정 요소에 대한 데이터를 저장할 수 있습니다. JavaScript에서 사용자는 모든 데이터를 단일 또는 다중 개체에 저장해야 합니다.

위 내용은 DOM에 데이터를 저장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!