[API_Storage] JS - getItem() 메서드 ★ - Storage 객체에 저장된 값 반환. (= getItem메서드 = 겟아이템 메서드) ※ 다크모드 유지

1. getItem() 예제 - Storage 객체에 저장된 값 반환
2. getItem() 정의
3. getItem() 구문
4. 아이템 출력 3가지 방법
5. getItem() 예제 - 다크모드 유지

getItem() 예제 - Storage 객체에 저장된 값 반환 

 

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

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

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

<script>

function createItem() {

  localStorage.today = Date.now();

}

function homzzang() {

  var x = localStorage.getItem("today");

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

}

</script>

 

결과보기

getItem() 정의

 

Storage 객체에 저장된 특정 키가 가리키는 값 반환.

 

---

 

1.

Storage 객체에 속하며,

localStorage 또는 sessionStorrage 객체일 수 있음.

 

2.

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

 

3.

Web Storage API에 해당.

 

getItem() 구문

 

localStorage.getItem(keyname)

또는,

sessionStorage.getItem(keyname)

 

---

[매개변수]

 

keyname

필수. 값을 얻고자 하는 하는 키의 이름.

 

---

[반환값]

 

지정된 키의 값을 나타내는 문자열 반환.

 

아이템 출력 3가지 방법

[방법1] - sessionStorage.getItem(keyname) 

 

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

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

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

<script>

function createItem() {

  sessionStorage.site = "홈짱닷컴 Homzzang.com";

}

function homzzang() {

  var x = sessionStorage.getItem("site");

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

}

</script>

 

결과보기

---

[방법2] - sessionStorage.keyname

 

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

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

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

<script>

function createItem() {

  sessionStorage.site = "홈짱닷컴 Homzzang.com";

}

function homzzang() {

  var x = sessionStorage.site;

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

}

</script>

 

결과보기

---

[방법3] - sessionStorage["keyname"]

 

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

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

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

<script>

function createItem() {

  sessionStorage.site = "홈짱닷컴 Homzzang.com";

}

function homzzang() {

  var x = sessionStorage["site"];

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

}

</script>

 

결과보기

getItem() 예제 - 다크모드 유지

 

<script>

document.addEventListener("DOMContentLoaded", function () {

    var modeSwitch = document.querySelector(".mode-switch");

    if(localStorage.getItem('theme') === 'dark') {

        document.documentElement.classList.add("dark");

    };

    modeSwitch.addEventListener("click", function () {

        document.documentElement.classList.toggle("dark");

        if(document.documentElement.classList.contains('dark')) {

            localStorage.setItem('theme', 'dark');

        } else {

            localStorage.setItem('theme', '');

        }

        modeSwitch.classList.toggle("active");

    });

});

</script>

 

볼피드 님 (211017) https://sir.kr/qa/435079