• Q&A
  • 회원가입
  • 로그인

[API_Storage] JS - key(n) 메서드 - Storage 객체의 n번째 키 이름 반환. (= key메서드 = 키메서드)

목차
  1. key() 예제 - localStorage 객체의 첫 번째 키 이름 반환
  2. key() 정의
  3. key() 구문
  4. key() 예제 - sessionStorage 객체의 첫 번째 키 이름 반환
  5. key() 예제 - localStorage 객체의 모든 키 이름 반환

 

key() 예제 - localStorage 객체의 첫 번째 키 이름 반환

 

<button onclick="homzzang()">클릭</button>

 

<p id="demo"></p>

 

<script>

function homzzang() {

  var x = localStorage.key(0);

  document.getElementById("demo").innerHTML = x;

}

</script> 

 

결과보기 

 

key() 정의

 

지정 색인번호의 key(키) 이름 반환.

 


 

1.

Storage 객체에 속하며, localStorage 또는 sessionStorrage 객체일 수 있음.

 

2.

IE8 이상 주요 최신 브라우저 모두 지원.

 

3.

Web Storage API의 일종

 

 

key() 구문

 

localStorage.key(index)

또는,

sessionStorage.key(index)

 


[매개변수]

 

index

필수. 이름을 얻기 원하는 키의 색인번호.

 


[반환값]

 

지정 key의 이름을 나타내는 문자열 반환.

 

 

key() 예제 - sessionStorage 객체의 첫 번째 키 이름 반환

 

<button onclick="createItems()">아이템 생성하기</button>

<button onclick="homzzang()">아이템 이름 얻기</button>

 

<p id="demo"></p>

 

<script>

function createItems() {

  sessionStorage.site = "홈짱닷컴";

  sessionStorage.host = "Homzzang.com";

  sessionStorage.open = 2012;

}

function homzzang() {

  var x = sessionStorage.key(1);

  document.getElementById("demo").innerHTML = x;

}

</script> 

 

결과보기 

 

key() 예제 - localStorage 객체의 모든 키 이름 반환

 

<button onclick="createItems()">아이템 생성하기</button>

<button onclick="displayItems()">아이템 표시하기</button>

 

<p id="demo"></p>

 

<script>

function createItems() {

  localStorage.setItem("today", Date.now());

  localStorage.setItem("host", "Homzzang.com");

  localStorage.setItem("open", 2012);

}

function displayItems() {

  document.getElementById("demo").innerHTML = "";

  for (let i = 0; i < localStorage.length; i++) {

  x = localStorage.key(i);

  document.getElementById("demo").innerHTML += x + "<br>";

  }

}

</script> 

 

결과보기

 

PS. StorageEvent 관련: key 속성 참고 바람.

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012