[JS] localStorage 사용법 (읽기, 쓰기, 삭제, 키목록 등)

https://hianna.tistory.com/697

[Javascript] localStorage 사용법 (읽기, 쓰기, 삭제, 키목록 등)

 

💡Web Storage- localStorage

WebStrorage API: LocalStorage

1. 데이터를 사용자 로컬에 저장하는 방식
2. 데이터를 저장, 덮어쓰기, 삭제 등 조작 가능
3. 자바스크립트로만 조작 가능
4. 모바일에서도 사용가능

 

Cookie와의 차이점

1. 유효기간이 없고 영구적으로 이용가능
2. 쿠키와 달리 네트워크 요청 시 서버로 전송되지 않음
3. 웹스토리지는 origin(프로토콜, 도메인, 포트)이 다르면 접근 불가능 

 

💡 localStorage 데이터 추가, 삭제, 불러오기 

<script>
	function init(){
    	//localstorage data추가 방법 3가지
        localStorage.Test= "AB";
        localStorage["Test"]= "AB";
 		localStorage.setItem("Test", "AB")
        
        
        //localstorage data취득 방법 3가지
        var val = localStorage.Test;
        var val = localStorage["Test"];
        var val = localStorage.getItem("Test");
        
        //취득 data출력
        document.querySelector("#result").innerHTML=val;
        
        
        //localStorage datat삭제
        localStorage.removeItem("TEST");
        
        // localStorage datat 전체삭제
        localStorage.clear();
    }
</script>

 

💡 localStorage VS sessionStorage

localStorage: 세션이 끊겨도 사용 가능 

sessionStorage: 같은 세션만 사용 가능