JavaScript
JS | 세션(session)
개발 공부
2023. 1. 5. 17:50
쿠키와 세션 : 정보를 지속적으로 유지하기 위한 수단
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"); //삭제
}