# 18.로컬스토리지를 활용한 로그인페이지

실행화면

블루마켓에 login 서브페이지를 제작

로컬스토리지 페이지로 이동

localStorage는 웹 브라우저에 내장된 저장소로, 모든 데이터를 문자열로 저장해야 한다.

객체를 그대로 저장하거나, 객체에서 가져온 값을 그대로 사용할 수 없다.

JSON.stringify 함수는 JavaScript 객체를 JSON 문자열로 변환한다.

객체를 localStorage에 저장할때는 JSON.stringify를 통해 JSON 문자열로 변환해야 한다.

반대로 JSON.parse 함수는 JSON 문자열을 JavaScript 객체로 변환한다.

localStorage에서 가져온 데이터를 JavaScript 객체로 사용할때는 JSON.parse 를 사용한다.

jQuery

const loginButton = $('#login');
const logoutButton = $('#logout');
let text = $('.main_banner h2');
let textold = text.text();

function init() {
	if (!localStorage.getItem('user')) {
    //JSON.stringify함수로 객체를 json 문자열로 변환
		localStorage.setItem('user', JSON.stringify({ id: 'test', password: '5246', isLoggedIn: false }));
	}
}

function login() {
	let uid = $('#uid').val();
	let upw = $('#upw').val();
 //json 문자열을 js객체로 변환
	let user = JSON.parse(localStorage.getItem('user'));

	if (uid === user.id && upw === user.password) {
		alert('로그인 성공!');
		text.text(`${uid}님 ${textold}`);
		$('.id,.pwd,#login').hide();
		$('#logout').show();
		user.isLoggedIn = true;
		localStorage.setItem('user', JSON.stringify(user));
	} else {
		alert('아이디 또는 비밀번호가 틀렸습니다.');
	}
}

function logout() {
	let user = JSON.parse(localStorage.getItem('user'));
	if (user.isLoggedIn) {
		alert('로그아웃 성공!');
		user.isLoggedIn = false;
		localStorage.setItem('user', JSON.stringify(user));
		text.text(`${textold}`);
		$('.id,.pwd,#login').show();
		$('#logout').hide();
	} else {
		alert('로그인 상태가 아닙니다.');
	}
}

init();

loginButton.on('click', function (e) {
	e.preventDefault();
	login();
});

logoutButton.on('click', function (e) {
	e.preventDefault();
	logout();
});

vanillaJS

const loginButton = document.querySelector('#login');
const logoutButton = document.querySelector('#logout');

const init = () => {
	// 로그인 정보가 localStorage에 없으면 초기값 설정
	if (!localStorage.getItem('user')) {
		localStorage.setItem('user', JSON.stringify({ id: 'test', password: '5246', isLoggedIn: false }));
	}
};

const login = () => {
	const user = JSON.parse(localStorage.getItem('user'));
	const uid = document.querySelector('#uid').value;
	const upw = document.querySelector('#upw').value;
	if (uid === user.id && upw === user.password) {
		alert('로그인 성공!');
		user.isLoggedIn = true;
		localStorage.setItem('user', JSON.stringify(user));
	} else {
		alert('아이디 또는 비밀번호가 틀렸습니다.');
	}
};

const logout = () => {
	const user = JSON.parse(localStorage.getItem('user'));

	if (user.isLoggedIn) {
		alert('로그아웃 성공!');
		user.isLoggedIn = false;
		localStorage.setItem('user', JSON.stringify(user));
	} else {
		alert('로그인 상태가 아닙니다.');
	}
};

init();

loginButton.addEventListener('click', function (e) {
	e.preventDefault();
	login();
});

logoutButton.addEventListener('click', function (e) {
	e.preventDefault();
	logout();
});

로그인구현