세션, 또는 local storage에 값 저장하기

로그인된 것들을 로컬스토리지나 세션에 저장하는 방법을 구현해보겠습니다.

브라우저에 데이터 저장하는 방법으로는  localStorage와 sessionStorage에 저장하는 방법 2가지가 있습니다.

자세하게는 다루지 않겠지만 차이점으로는

페이지를 새로 고침할때 값들이 유지 : 세션스토리지

브라우저를 다시 껏다 켜도 유지 : 로컬스토리지

원래라면 세션스토리지를 이용합니다만 앞으로 개발이 되는동안 로그인이 계속 유지가 되어야 테스트할때도 원할하므로

저는 브라우저 로컬스토리지에 로그인 정보를 저장하여 로그인이 계속 유지 될 수 있도록 하겠습니다.

사용자 정보를 local storage에 저장하기

로그인이 완료되고 통신이 완료되면 세션에 저장하는 함수를 호출하도록 하겠습니다.

function signin() {
    const user_id = document.getElementById("sideRemoteId").value;
    const user_password = document.getElementById("sideRemotePW").value;
    const maindataLoadInVO = {
        "user_id": user_id,
        "user_password": user_password
    }
    $.ajax({
        type: 'POST', //post 방식으로 전송
        url: '/user/signin', //데이터를 주고받을 파일 주소
        data: JSON.stringify(maindataLoadInVO), //위의 변수에 담긴 데이터를 전송해준다.
        dataType: 'JSON', 
        async: false,
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
    		setSession(data);
    		callNavBar();
    		setLoginedRemoteCtrl();
        },
        error: function () {
            alert('통신실패!!');
        }
    });
}

앞서 서버를 통해 전달받은 데이터 : ' data'를 매개변수로 setSettion이라는 함수에 전달했습니다.

function setSession(data){
    localStorage.clear();
    localStorage.setItem('user_auth', data.user_auth);
    localStorage.setItem('user_birth', data.user_birth );
    localStorage.setItem('user_email',  data.user_email);
    localStorage.setItem('user_id',  data.user_id);
    localStorage.setItem('user_name', data.user_name);
    localStorage.setItem('user_password',  data.user_password);
    localStorage.setItem('user_phonenum',  data.user_phonenum);
}

localStorage에 값을 저장하려면 localStorage.setItem을 이용합니다.

최초 저장하기 전 기존에 혹시라도 저장되어있는 정보들을 초기화하는 

 localStorage.clear()를 통해 초기화를 합니다.

 localStorage.clear()

data에는

해당 정보가 저장되어있습니다.

    localStorage.setItem('user_auth', data.user_auth);
    localStorage.setItem('user_birth', data.user_birth );
    localStorage.setItem('user_email',  data.user_email);
    localStorage.setItem('user_id',  data.user_id);
    localStorage.setItem('user_name', data.user_name);
    localStorage.setItem('user_password',  data.user_password);
    localStorage.setItem('user_phonenum',  data.user_phonenum);

그리고 setItem 함수를 이용해서 값을 저장합니다.

    localStorage.setItem(저장소에 저장할 이름, 저장될 데이터);

해당함수가 정상적으로 작동하면 애플리케이션의 로컬스토리지에서 확인할 수 있다.