[JavaScript] 웹 스토리지(Web Storage)

웹 스토리지 ( Web Storage )

---

기존 쿠키의 문제점을 보완하기 위해 사용한다.

https://mag1c.tistory.com/187

쿠키와 세션 (Cookie & Session)

 

 

웹 스토리지의 특징

1. 브라우저 내부에 Key, Value 쌍을 저장하는 공간이다.

2. 네트워크 요청 시 서버로 전송되지 쿠키에 비해 않아 많은 자료보관이 가능하다. (2MB이상)

3. 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다. 자바스크립트 내에서 조작이 가능하다.

4. 웹 스토리지 객체는 오리진(origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.

오리진(origin)영역

도메인, 프로토콜, 포트로 정의되는 영역

 

//사용자의 브라우저가 웹 스토리지의 지원 여부를 확인한다.
if(typeof(Storage)!=="undefined") alert("사용가능")
else alert("사용 불가")

 

 

스토리지 또한 개발자모드(F12)의 Application 탭에서 확인 가능하다.

 

 

메서드

메서드	설명
setItem(key, value)	key, value 저장
getItem(key)	key에 해당하는 value 받기
removeItem(key)	해당 key와 그에 맞는 value 삭제
clear()	스토리지 초기화
key(index)	인덱스에 해당하는 key값 받기
length	저장된 개수

 

 

localStorage vs sessionStorage

브라우저를 껐다가 켜도 데이터가 남아있다 - localStorage

페이지를 새로고침해도 데이터가 남아있지만, 브라우저를 종료하면 사라진다 - sessionStorage

 

 

 

 

사용예제

---

<div id="cnt"></div>
<p><button id="btn">버튼</button></p>

<script>
    const btn = document.querySelector('#btn');
    btn.addEventListener('click', function(){
        if(typeof(Storage) !=="undefined"){
            if(localStorage.cnt){
                localStorage.cnt = Number(localStorage.cnt) +1;
            }else{
                localStorage.cnt = 1;
            }
            document.querySelector("#cnt").innerHTML="세션카운트 : " + localStorage.cnt;
        }
    })
</script>