목차
- getItem() 예제 - Storage 객체에 저장된 값 반환
- getItem() 정의
- getItem() 구문
- 아이템 출력 3가지 방법
- 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
