목차
key() 예제 - localStorage 객체의 첫 번째 키 이름 반환 key() 정의 key() 구문 key() 예제 - sessionStorage 객체의 첫 번째 키 이름 반환 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 속성 참고 바람.
