[JS] 웹 스토리지(로컬 스토리지 / 세션 스토리지) 이해하기

해당 페이지에서는 웹 스토리지(로컬/세션 스토리지)에 대해서 이해를 돕기 위한 목적으로 작성한 글입니다.

 

 

 

💡 웹 스토리지를 이해하기 이전에 쿠키를 이해하고 오시면 좀 더 이해가 쉽게 될 것입니다. 이전에 작성한 쿠키 관련 글입니다.!

[JS] 쿠키(Cookie) 이해하기

 

 

 

1) 웹 스토리지(Web Storage)란 무엇인가?

---

💡 서버가 아닌 클라이언트 내에서 데이터를 저장할 수 있도록 지원하는 저장소를 의미합니다.
또한 웹 스토리지는 쿠키의 단점을 보완하기 위해서 HTML5에서 추가된 ‘로컬 스토리지 / 세션 스토리지'를 의미합니다.

• 쿠키의 저장구조는 ‘key : value’ 형태의 구조로 저장이 됩니다.
• 웹 스토리지는 모바일은 최대 2.5KB의 용량 제한과 웹 브라우저는 최대 5KB의 용량 제한을 가지고 있습니다.(<-> 쿠키(Cookie)는 최대 4KB의 용량을 가지고 있습니다)
• 웹 스토리지의 값(value)은 오직 문자열(String) 데이터만 지원합니다.
• 이외의 타입은 String 타입을 파싱 하여서 JSON 혹은 number 타입으로 전환하여 사용하여야 한다. (cf. 하단의 예시에 사용방법 포함)
• 쿠키와 다르게 네트워크 요청 시 서버로 저장이 되지 않습니다.
• 서버의 DB에 저장하는 데이터에 비해 중요성이 낮거나 유실되어도 무방한 데이터를 저장하는 것이 권장합니다.

 

 

2) 로컬 스토리지(Local Storage)

---

1. 로컬 스토리지의 정의

---

💡 만료기간이 존재하지 않으며 페이지를 변경하거나 브라우저를 닫아도 반 영구적으로 유지되는 저장소를 의미합니다.

 

• 직접 로컬 스토리지를 초기화(clear)하거나 제거(removeItem)하지 않는다면 만료기간이 존재하지 않습니다.
• 페이지를 변경하거나 브라우저를 닫더라도 값은 유지됩니다
• 도메인이 다른 경우에는 로컬 스토리지 공유가 불가능합니다.(하단 예시 참고)

[예시] 다른 도메인의 경우 로컬 스토리지의 공유가 불가능

http://test.com/user라는 URL에 로컬 스토리지 정보를 저장하였다고 가정을 하였을 경우에
http://test2.com/user로 접근하였을 경우 해당 로컬스토리지의 값은 유효하지 않습니다.

 

[참고] MDN - Window.localStorage

Window.localStorage - Web API | MDN

 

2. 로컬 스토리지의 사용

---

💡 '로컬 스토리지'에서 사용되는 '메서드'를 확인합니다.

메서드	설명
setItem(key, value)	키(key)와 값(value)을 기반으로 저장합니다.
getItem(key)	키(key) 값을 기반으로 값(value)을 불러옵니다.
key(index)	인덱스(index) 값을 기반으로 값(value)을 불러옵니다.
removeItem(key)	키(key) 값을 기반으로 해당 로컬 스토리지를 제거합니다.
clear()	로컬 스토리지들을 초기화 합니다.
length	로컬 스토리지에 저장된 데이터 개수를 반환 받습니다.

 

[참고] 메서드를 이용한 사용 예제

const controlLocalStorage = () => {
    // 구조 분해 할당(Destructuring assignment)을 이용한 메소드 호출
    const { setItem, getItem, removeItem, clear, length, key } = localStorage;

    // 로컬 스토리지 저장1 - 키(key)와 값(value)을 기반으로 저장합니다.(값을 문자열로 저장)
    localStorage.setItem('userId', 'adjh54');

    // 로컬 스토리지 저장2 - 키(key)와 값(value)을 기반으로 저장합니다.(값을 Object로 저장)
    const userInfoObj = {
        userId: 'adjh54',
        userAge: 30,
    };
    localStorage.setItem('userInfoObj', JSON.stringify(userInfoObj));

    // 로컬 스토리지 저장3 - 키(key)와 값(value)을 기반으로 저장합니다.(값을 Array로 저장)
    const userAddr = ['Seoul', 'Dongjak-gu'];
    localStorage.setItem('userInfoArr', JSON.stringify(userAddr));

    // 로컬 스토리지 불러오기1 - 키(key) 값을 기반으로 값(value)을 불러옵니다.(String -> String)
    localStorage.getItem('userId');

    // 로컬 스토리지 불러오기2 - 키(key) 값을 기반으로 값(value)을 불러옵니다.(String -> Object)
    JSON.parse(localStorage.getItem('userInfoObj')!);

    // 로컬 스토리지 불러오기3 - 키(key) 값을 기반으로 값(value)을 불러옵니다.(String -> Array)
    JSON.parse(localStorage.getItem('userInfoObj')!);

    // 로컬 스토리지 불러오기 - 인덱스 값을 기반으로 값(value)을 불러옵니다.
    localStorage.key(0);

    // 로컬 스토리지 삭제 - 키(key) 값을 기반으로 해당 로컬 스토리지를 제거합니다.
    localStorage.removeItem('userId');

    // 로컬 스토리지 초기화
    localStorage.clear();

    // 로컬 스토리지에 저장된 데이터 개수를 반환 받습니다.
    localStorage.length;
};

 

[참고] MDN - Window.localStorage

Window.localStorage - Web API | MDN

 

 

3) 세션 스토리지(Session Storage)

---

1. 세션 스토리지의 정의

---

💡 브라우저의 탭 안에 유효한 저장소이며, 브라우저를 닫는 경우 소멸이 되는 저장소이다.

• 브라우저 탭 안에서만 유효한 저장소입니다.
• 브라우저가 다른 경우 해당 저장소 값은 유효하지 않습니다.
• 같은 도메인이라도 세션이 다르면 접근이 불가능합니다.

 

[더 알아보기]
💡 세션(Session) 이란?

- 일정 시간 동안 같은 사용자(브라우저)로부터 들어오는 일련의 요청을 하나의 상태로 보고 그 상태를 유지하는 기술을 의미합니다.
+ 세션은 쿠키를 기반하고 있지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리합니다.
+ 서버에서는 클라이언트를 구분하기 위해 세션 ID를 부여하며 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증 상태를 유지합니다.

 

2. 세션 스토리지 사용

---

💡 '세션 스토리지'에서 사용되는 '메서드'를 확인합니다.

 

메서드	설명
setItem(key, value)	키(key)와 값(value)을 기반으로 저장합니다.
getItem(key)	키(key) 값을 기반으로 값(value)을 불러옵니다.
key(index)	인덱스(index) 값을 기반으로 값(value)을 불러옵니다.
removeItem(key)	키(key) 값을 기반으로 해당 세션 스토리지를 제거합니다.
clear()	세션 스토리지들을 초기화 합니다.
length	세션 스토리지에 저장된 데이터 개수를 반환 받습니다.

 

[참고] 메서드를 이용한 사용 예제

const fn_controlSessionStorage = () => {
    // 구조 분해 할당(Destructuring assignment)을 이용한 메소드 호출
    const { setItem, getItem, removeItem, clear, length, key } = sessionStorage;

    // 세션 스토리지 저장1 - 키(key)와 값(value)을 기반으로 저장합니다.(값을 문자열로 저장)
    sessionStorage.setItem('userId', 'adjh54');

    // 세션 스토리지 저장2 - 키(key)와 값(value)을 기반으로 저장합니다.(값을 Object로 저장)
    const userInfoObj = {
        userId: 'adjh54',
        userAge: 30,
    };
    sessionStorage.setItem('userInfoObj', JSON.stringify(userInfoObj));

    // 세션 스토리지 저장3 - 키(key)와 값(value)을 기반으로 저장합니다.(값을 Array로 저장)
    const userAddr = ['Seoul', 'Dongjak-gu'];
    sessionStorage.setItem('userInfoArr', JSON.stringify(userAddr));

    // 세션 스토리지 불러오기1 - 키(key) 값을 기반으로 값(value)을 불러옵니다.(String -> String)
    sessionStorage.getItem('userId');

    // 세션 스토리지 불러오기2 - 키(key) 값을 기반으로 값(value)을 불러옵니다.(String -> Object)
    JSON.parse(sessionStorage.getItem('userInfoObj')!);

    // 세션 스토리지 불러오기3 - 키(key) 값을 기반으로 값(value)을 불러옵니다.(String -> Array)
    JSON.parse(sessionStorage.getItem('userInfoObj')!);

    // 세션 스토리지 불러오기 - 인덱스 값을 기반으로 값(value)을 불러옵니다.
    sessionStorage.key(0);

    // 세션 스토리지 삭제 - 키(key) 값을 기반으로 해당 로컬 스토리지를 제거합니다.
    sessionStorage.removeItem('userId');

    // 세션 스토리지 초기화
    sessionStorage.clear();

    // 세션 스토리지의 개수를 반환 받는다.
    sessionStorage.length;
};

 

 

[참고] MDN - Window.sessionStorage

Window.sessionStorage - Web API | MDN

 

 

 

4) 오늘의 결론

---

쿠키에 이어서 웹 스토리지에 대해서 공부하였습니다.
마지막으로 쿠키와 웹 스토리지를 비교하는 글을 확인하고 최종적으로 정리하시면 좋을 것 같습니다.

 

오늘도 감사합니다😀