Local Storage VS Cookie

24.05.31

KB IT's your life 5기

Vue.js/SFC/Composition API

예제 중 로그인 구현을 하는 부분이 나왔다.

아직 FE단계여서 DB와의 연결을 하지 못하는 상황이라 로그인 정보를 클라이언트의 로컬 스토리지에 저장하고 그걸 가져와
로그인을 구현하는 예제가 있었다.

해당 예제에서 처음 Local Storage를 접했다.

 

const getUserInfo = () => {
    let strUserInfo = window.localStorage.getItem("userInfo");
    if (!strUserInfo) {
        return { authenticated: false};
    } else {
        return JSON.parse(window.atob(strUserInfo));
    }
}



const loginProcess = (userid, password, successCallback, failCallback) => {
    //이 부분은 백엔드 API 인증 서버와 HTTP로 통신하여 인증 처리해야 함.
    const user= staticUsers.find((u) => u.userid===userid && u.password===password);
    if (user) {
        let userInfo = { authenticated:true, userid:user.userid, roles: user.roles };
        setUserInfo(userInfo);
        successCallback();
    } else {
        if (failCallback) failCallback();       
    }
}

여기에 window.localStorage 이 부분에서 이게 뭐지 했다.

GPT 의 조언으로 브라우저의 개발자도구 Application 부분에서 찾을 수 있었다.

login page에서 id와 pw를 입력하면 local storge에 저장

Application 목록

여기서 Local storage가 있었고 userInfo가 저장되어 있었다.

Local storage

• 용도: 클라이언트 측에서 영구적으로 데이터를 저장합니다.
• 저장 용량: 보통 5-10MB.
• 만료: 만료 시간 없음, 사용자가 직접 삭제하거나 브라우저 설정에서 삭제하지 않는 한 데이터가 유지됩니다.
• 접근성: JavaScirpt에서만 접근 가능.
• 보안: 서버에 자동으로 전송되지 않음.

Cookie

• 용도: 클라이언트와 서버 간의 작은 데이터를 저장하고 전송합니다.
• 저장 용량: 보통 4KB.
• 만료: 설정된 만료 시간에 따라 만료됩니다.
• 접근성: JavaScript 및 서버에서 접근 가능.
• 보안: 매 HTTP 요청마다 서버로 자동 전송.

Session Storage

• 용도: 일시적인 데이터를 저장합니다.
• 저장 용량: 보통 5-10MB.
• 만료: 브라우저 탭이나 창이 닫힐 때 데이터가 삭제됩니다.
• 접근성: JavaScirpt에서만 접근 가능.
• 보안: 서버에 자동으로 전송되지 않음.

로컬과 세션의 차이는 만료되는 타이밍이고 로컬과 쿠키의 차이는 서버로 자동 전송 되는지 아닌지의 차이가 있는 듯하다.