[API_Storage] JS - length 속성 - Storage 객체에 저장된 아이템 항목 개수 (= length속성 = 렝스속성)

1. length 예제 - Storage 객체에 저장된 아이템 항목 개수
2. length 정의
3. length 구문
4. length 예제 - sessionStorage.length 경우
5. length 예제 - localStorage.length 경우

※ Storage length Property

length 예제 - Storage 객체에 저장된 아이템 항목 개수

 

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

 

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

 

<script>

function homzzang() {

  var x = localStorage.length;

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

}

</script> 

 

결과보기 

length 정의

 

특정 도메인에 대해 브라우저 Storage 객체에 저장된 항목 개수 반환.

 

---

[특징]

 

• Storage 객체에 속하며, localStorage 또는 sessionStorrage 객체일 수 있음.
• IE8 이상 주요 최신 브라우저 모두 지원.
• Web Storage API의 일종
• Strorage 객체에 저장된 아이템을 반복문 이용해 표시할 때 유용.

 

length 구문

 

• localStorage.length
• sessionStorage.length

length 예제 - sessionStorage.length 경우

 

<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.length;

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

}

</script> 

 

결과보기 

length 예제 - localStorage.length 경우

 

<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> 

 

결과보기