[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 속성 참고 바람.