JS | 세션(session)

쿠키와 세션 : 정보를 지속적으로 유지하기 위한 수단 

 

js 세션

: 브라우저측의 세션

 

localStorage와 sessionStorage은 브라우저의 키 = 값 형태로 데이터를 저장하는 브라우저 측의 세션입니다.

localStorage는 브라우저를 종료하더라도 지속됩니다. (영구지속)

sessionStorage는 브라우저를 종료하면 사라집니다.

 

쿠키와 다른 점은?

- 쿠키는 서버간 전송이 가능합니다.

- 스토리지는 브라우저에서만 사용

 

setItem(key, value) – 키-값 쌍을 보관합니다.

getItem(key) – 키에 해당하는 값을 받아옵니다.

removeItem(key) – 키와 해당 값을 삭제합니다.

clear() – 모든 것을 삭제합니다.

key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.

length – 저장된 항목의 개수를 얻습니다.

 

---

 

예제 1 ) 로컬스토리지 세션을 만들고 삭제하기

html

  <h3>로컬스토리지 사용하기</h3>
    
    <button onclick="createSession()">세션만들기</button>
    <button onclick="removeSession()">세션삭제하기</button>

 

function createSession(){

            //스토리지에는 순수한 문자열만 저장이 됩니다.
            //그래서 오브젝트를 저장하려면 JSON.stringify() 치환해서 저장하면 좋습니다.
            //저장
            localStorage.setItem("aaa","홍길동");
            localStorage.setItem("bbb", JSON.stringify([1,2,3])); //오브젝트를 문자열로 치환해서 저장
            //문자열 형식밖에 저장안됨 (배열,객체 형태로 저장이 안되고 문자열 형태로 저장되기 때문에 나중에 문제가 없게끔 오브젝트를 문자열로 치환해서 저장한다.)

            //사용
            var aaa = localStorage.getItem('aaa'); //키
            var bbb = localStorage.getItem('bbb'); 

            console.log(aaa); 
            //문자열로 저장이 되어있어도 문자열도 배열로 인식되어 나옴!
            console.log(JSON.parse(bbb)); //원본 유지됨
            
            console.log(typeof bbb); 

        }

function removeSession(){

            localStorage.clear("aaa"); //삭제

}