JS - 세션 저장소

웹 저장소는 JavaScript 가 사용자의 브라우저에 데이터를 저장하는 것을 말합니다. 저장되는 방식은 쿠키와 같지만 보다 강력합니다.

사용자가 브라우저에 접속하면 세션은 자동으로 만들어 집니다. 이렇게 저장된 세션은 15분간 데이터를 저장하고 15분 이내에 계속 동작을 취한다면 데이터를 보존하고 유지하게 됩니다.

문제는 세션은 서버에 저장되는 데이터이기 때문에 웹 서버와 통신이 가능해야만 합니다. 이 말은 단순히 개인 컴퓨터에서는 제대로 된 결과를 확인할 수 없음을 뜻합니다.

로컬 스토리지와 용도에 따라 구분되어야 하지만 그다지 문제가 없다면 세션 스토리지를 사용할 것을 권장하고 있습니다.

왜냐하면 로컬 스토리지는 명시적으로 데이터를 삭제하지 않는 이상 데이터는 그대로 계속 쌓이게 되며 변수명의 충돌 우려가 있기 때문입니다. 형식은 다음과 같습니다.

sessionStorage.메서드

메서드	설 명
key(n)	n 번째 키의 이름을 문자열로 반환. (n 은 index 입니다.) 객체의 속성은 정렬되지 않습니다. 모든 항목에 액세스하려면 for 문을 이용하세요.
getitem(key)	key 의 값을 반환. key 가 없으면 null 을 반환
setitem(key, value)	key 와 value 를 저장할 때
removeitem(key)	key 를 삭제할 때
clear()	모든 데이터를 삭제할 때

세션 데이터 저장하기

데이터를 저장하고 key() 메서드로 모든 세션의 이름을 얻습니다. key 번호는 정렬되지 않기 때문에 for 문으로 값을 확인할 수 있습니다.

<script>
sessionStorage.setItem('name', '하보니');
sessionStorage.setItem('age', 20);
sessionStorage.setItem('job', '백수');

for(var i = 0; i < sessionStorage.length; i++) {
  console.log(sessionStorage.key(i));
}
/*
  결과:
  age
  job
  name
*/
</script>

세션 저장은 다음의 방법도 가능합니다.

<script>
// 세션을 저장합니다.
sessionStorage["car"] = "BMW";

// 값을 확인합니다.
document.write(sessionStorage["car"]); // BMW
</script>

세션 데이터 읽기

세션을 읽어오는 방법은 매우 쉽습니다.

<script>
sessionStorage.setItem('name', '하보니');
sessionStorage.setItem('age', 20);
sessionStorage.setItem('job', '백수');


// name 값을 읽어 옵니다.
var name = sessionStorage.getItem("name");
document.write(name); // 하보니

document.write(sessionStorage.length); // 3
</script>

세션 데이터 삭제하기

<script>
sessionStorage.setItem('name', '하보니');
sessionStorage.setItem('age', 20);
sessionStorage.setItem('job', '백수');

document.write(sessionStorage.length); // 3


// job 을 삭제합니다.
sessionStorage.removeItem('job');
document.write(sessionStorage.length); // 2


// 세션을 모두 삭제합니다.
sessionStorage.clear();
document.write(sessionStorage.length); // 0
</script>

세션 스토리지 지원 확인

세션 스토리지를 지원하는지 확인하기 위해 다음의 방법으로 가능합니다.

<script>
if('sessionStorage' in window && window['sessionStorage'] !== null) {
  console.log("Storage available.");
}else{
  console.log("Storage is not available.");
}
</script>