[React] 로그인/로그아웃 유지하기 ( sessionStorage, localStorage)

header

{(sessionStorage.getItem("isLogin") === null) ?
	<Nav.Link href="/logIn">로그인</Nav.Link> :
	<Nav.Link href="/" onClick={this.onLogout}>로그아웃</Nav.Link>
}

 

login

if(this.state.studentId && this.state.password)
{
	axios.post("/logIn", {
	studentId: this.state.studentId,
	password: this.state.password
	})
	.catch(function(error){
		alert("학번 또는 비밀번호를 다시 확인해주세요.");
	})
	.then((response) => {
		let id = response.data.studentId;
		let pw = response.data.password;
		console.log(id, pw);

		if(id === this.state.studentId && pw === this.state.password)
		{
			sessionStorage.setItem('isLogin', this.state.studentId);
			window.location.href="/";
		}
		else alert("아이디 또는 비밀번호가 틀렸습니다.");
	});
}

 

sessionStorage, localStorage

둘 모두 애플리케이션 전역에 접근이 가능하다.

사용시 storage에 저장된 데이터는 모두 문자열만 사용 가능하기 때문에

다른 타입의 데이터는 JSON 형태로 사용해야한다.

 

sessionStorage

브라우저 창이 닫히면 세션이 종료되며 storage에 저장된 데이터도 소멸된다.

sessionStorage.setItem('key', value);
sessionStorage.getItem('key');
sessionStorage.removeItem('key');

 

localStorage

동일한 PC 안에서 동일한 브라우저를 사용했을 때 사용한다.

즉, 데이터를 직접 삭제하지 않는 한 브라우저를 닫아도 저장된 데이터를 불러올 수 있다.

로그인 시 '아이디 저장' 또는 '자동 로그인'과 같은 기능에서 사용하는 것이다.

localStorage.setItem('key', value);
localStorage.getItem('key');
localStorage.removeItem('key');