[JavaScript]sessionStorage 간단 사용

1. sessionStorage란?

sessionStorage에 대한 자세한 설명은 아래의 두 사이트를 참고.

쓸데없는 코딩하기

[javascript] 세션 스토리지 알고 사용하기

모던 JavaScript 튜토리얼

localStorage와 sessionStorage

 

2. sessionStorage 간단 사용

아래 그림과 같이 input tag에 댓글을 달면 로그인 시 사용한 이메일 정보(sessionStorage)와 댓글이 입력되는 웹페이지를 구현한다고 했을 때, login.html에서 수집한 이메일 정보를 review.html에서 사용하기 위해서는 이메일 정보가 지속성 있게 유지될 필요가 있다. 

review.html 페이지

login.html 페이지

sessionStorage 객체를 이용하면 이를 손쉽게 구현할 수 있다.

login.html과 연동된 login.js에 아래와 같은 코드를 입력하고, 

// login.js

let id = document.getElementById("emailInput"); 
// 이메일정보가 입력되는 input tag의 id(혹은 class)를 불러온다.

sessionStorage.setItem("ID", id.value);
// sessionStorage에 해당 정보의 값을 저장한다.

댓글이 작성될 review.html과 연동된 review.js에 아래와 같은 코드를 입력한다. 이 후에 해당 값을 원하는 대로 사용하면 끝!

// review.js

let yourID = sessionStorage.getItem("ID");
// sessionStorage에 저장된 이메일 정보 값을 review.js에서 불러온다.

 

개발자 도구에서 살펴보면 아래 그림과같이 Application 탭의 Session Storage에 해당 값이 저장되어 있는 것을 확인할 수 있다.