이 게시물은 JavaScript의 Storage 'key()' 메서드를 보여줍니다.
Storage key() 메서드는 JavaScript에서 무엇을 합니까?
“ 열쇠() ” 메서드는 지정된 인덱스에 배치된 키 이름을 검색하는 Storage 개체와 연결됩니다. '저장소' 객체는 ' 현지의 ' 아니면 그 ' 세션 ' 저장. 이를 통해 사용자는 로컬 및 세션 스토리지 키 모두에 액세스할 수 있습니다.
구문(로컬 저장소용)
localStorage. 열쇠 ( 색인 ) ;
위의 구문은 하나의 매개변수 ' 색인 ” 주어진 인덱스에서 키의 이름을 반환합니다.
구문(세션 저장용)
sessionStorage. 열쇠 ( 색인 ) ;
위 구문은 'localStorage'와 동일한 'index' 매개변수도 지원합니다.
위에서 정의한 두 구문 모두 저장소 개체의 키 이름을 문자열로 반환합니다. 두 가지를 하나씩 구현해 봅시다.
예 1: 저장소 'key()' 메서드를 적용하여 지정된 로컬 저장소 키 이름 검색
이 예제에서는 로컬 지정 인덱스 저장소 키 이름을 가져오기 위한 저장소 'key()' 메서드의 실제 구현을 설명합니다.
HTML 코드
먼저 주어진 HTML 코드를 살펴보십시오.
< h2 > 스토리지 키 ( ) 방법 자바스크립트에서 h2 >< 버튼 클릭 = 'myFunc()' > 지정된 로컬 저장소 키 가져오기 단추 >
< 아이디 = '데모' > 피 >
위의 코드 조각에서:
- 먼저 '를 통해 부제목을 지정합니다. ” 태그.
- 다음으로 '의 도움으로 버튼을 추가하십시오. <버튼> '를 포함하는 태그 온 클릭 ” 기능을 실행하는 이벤트 “ myFunc() ” 버튼을 클릭합니다.
- 마지막으로 '를 통해 빈 단락을 만듭니다. ” 할당된 ID “demo”를 통해 쉽게 액세스할 수 있는 태그입니다.
자바스크립트 코드
다음으로 아래에 명시된 코드로 진행하십시오.
< 스크립트 >localStorage. setItem ( '웹사이트' , '리눅스' ) ;
localStorage. setItem ( '퍼스트튜토리얼' , 'HTML' ) ;
localStorage. setItem ( '두 번째 튜토리얼' , '자바스크립트' ) ;
함수 myFunc ( ) {
x가 있다 = localStorage. 열쇠 ( 1 ) ;
문서. getElementById ( '데모' ) . innerHTML = 엑스 ;
}
스크립트 >
위의 코드 블록에서:
- “ 로컬 스토리지 ” 속성은 “ setItem() ” 메서드를 사용하여 지정된 로컬 저장소 항목을 설정합니다.
- 다음으로 '라는 함수 myFunc() '로 정의됩니다.
- 그 정의에서 ' 열쇠() ” 메서드는 “ 로컬 스토리지 ” 속성을 사용하여 첫 번째 인덱스의 키 이름을 가져옵니다.
- 그 후, “ document.getElementById() ” 메서드는 ID “demo”를 사용하여 빈 단락에 액세스하여 로컬 스토리지 항목 키 “name”을 추가하는 데 적용됩니다.
산출
표시된 대로 출력에는 로컬 스토리지 항목 키 이름 .e가 표시됩니다. 버튼 클릭 시 알파벳 순서에 따라 첫 번째 색인에 'SecondTutorial'이 표시됩니다.
예 2: 지정된 세션 스토리지 키 이름을 가져오기 위해 스토리지 'key()' 메서드 적용
이 예에서 저장소 'key()' 메서드는 특정 인덱스가 있는 세션 저장소 키 이름을 반환합니다.
HTML 코드
먼저 다음 HTML 코드를 살펴봅니다.
< h2 > 스토리지 키 ( ) 방법 자바스크립트에서 h2 >< 버튼 클릭 = 'myFunc()' > 지정된 세션 저장소 키 가져오기 단추 >
< 아이디 = '데모' > 피 >
위의 코드는 예제 1과 동일하지만 HTML 콘텐츠가 약간 업데이트되었습니다.
자바스크립트 코드
다음으로 다음 코드로 이동합니다.
< 스크립트 >sessionStorage. setItem ( '웹사이트' , '리눅스' ) ;
sessionStorage. setItem ( '첫 번째' , 'HTML' ) ;
sessionStorage. setItem ( '두번째' , '자바스크립트' ) ;
함수 myFunc ( ) {
x가 있다 = sessionStorage. 열쇠 ( 2 ) ;
문서. getElementById ( '데모' ) . innerHTML = 엑스 ;
}
스크립트 >
여기서 세션 저장 항목은 ' 세션 저장소 ” 속성과 “ 열쇠() ” 메서드는 두 번째 인덱스의 지정된 인덱스 세션 스토리지 키 이름을 가져오기 위해 적용됩니다.
산출
이 결과에서 'key()' 메서드는 두 번째 인덱스에 저장된 세션 저장 항목의 키 이름을 표시했습니다. 저장소 키 이름에 대한 검색 프로세스는 '에서 검색을 시작하는 알파벳 순서를 따릅니다. 0 ' 색인.
결론
JavaScript는 저장소 '를 제공합니다. 열쇠() ” 메서드는 둘 다의 특정 색인으로 키 이름을 가져옵니다. 현지의 ' 그리고 ' 세션 ” 스토리지 객체. 저장소에서 지정된 키 이름을 검색한 다음 DOM(Document Object Model)에 해당 이름을 표시합니다. 이 작업을 수행하려면 '인덱스' 매개변수만 필요합니다. 이 게시물은 JavaScript 저장소 'key()' 메서드의 작업을 자세히 설명했습니다.