[TIL] 웹스토리지 LocalStorage, SessionStorage와 Cookie의 차이

이번에 프로젝트를 진행하며 프론트단에서만 데이터 처리를 해야하는 경우가 있었기 때문에 이를 위헤 웹스토리지를 사용했다. 평소에는 로그인 부분에 있어 토큰을 저장하는 용도로만 사용했었는데 이번에는 json 형식의 데이터를 웹스토리지에 저장하면서 CRUD를 구현했다. 그래서 각각의 웹스토리지의 차이에 대해서 다시한번 공부해보려고 한다.

 

1. Web Storage란?

웹스토리지는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 기술인데 HTML5에서 등장한 새로운 기능이다. DB에 저장하지 않아도 되는 데이터나 클라이언트단에서만 사용해야하는 정보 등을 저장하여 사용할 수 있고, 웹스토리지에는 로컬 스토리지와 세션 스토리지 두가지가 있다.

 

웹 스토리지는 개발자 도구의 Application에서 확인할 수 있다.

• F12(단축키) -> Application -> Local, Session Storage
• 클라이이언트에서 데이터를 저장할 수 있도록 HTML5부터 등장한 새로운 방식의 데이터 저장소
• 로컬 스토리지와 세션 스토리지
• key와 value 형태의 데이터 저장, 자바스크립트의 모든 원시형 데이터와 객체 저장 가능
• window 객체의 프로퍼티로 존재
• 데이터 저장용량이 넉넉함
• HTML5를 지원하는 브라우저만 사용 가능

 

 

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

• 저장한 데이터를 삭제하지 않는 이상, 브라우저를 닫아도 지속적으로 유지
• 자동 로그인 기능 등을 구현할 때 유용하게 사용
• 새 탭 열기를 해도 동일한 데이터 공유 가능

 

1) 로컬 스토리지에 아이템 추가, 읽기, 삭제

로컬스토리지에 아이템을 추가시키고 읽고, 삭제하는 방법은 아래와 같다.

// 로컬스토리지에 데이터 저장
localstorage.setItme('name', 'Lia');

// 로컬스토리지에서 데이터 가져오기
const name = localstorage.getItme('name');

// 로컬스토리지에 데이터 삭제
localstorage.removeItem('name');

// 로컬스토리지에 데이터 전체삭제
localstorage.clear();

 

2) 로컬 스토리지에 객체나 배열 저장 방법

로컬스토리지에 저장할 때는 key, value값을 사용하는데 객체나 배열도 저장할 수 있다.

// 저장할 객체
const user = {
    userName: 'Lia',
    age: 23,
}

// 저장할 배열
const userName = ['Lia', 'Minsu', 'Emaily'];

-------------------------------------------------

// Local Storage에 저장
localStorage.setItem('user', JSON.stringify(user));
localStorage.setItem('userName', JSON.stringify(userName));

// Local Storage에서 가져오기
const getUser = localStorage.getItem('user');
const userObj = JSON.parse(getUser);

const getUserName = localStorage.getItem('userName');
const userArr = JSON.parse(getUserName);

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

• 브라우저를 종료하면 데이터가 지워짐
• 일회성 로그인이나 비로그인 상태의 장바구니 등에 활용 가능

 

1) 세션 스토리지에 아이템 추가, 읽기, 삭제

세션스토리지에 역시 로컬스토리지와 동일하게 아이템을 저장하고 읽고 삭제할 수 있다.

// 세션스토리지에 데이터 저장
sessionStorage.setItme('name', 'Lia');

// 세션스토리지에서 데이터 가져오기
const name = sessionStorage.getItme('name');

// 세션스토리지에 데이터 삭제
sessionStorage.removeItem('name');

// 세션스토리지에 데이터 전체삭제
sessionStorage.clear();

 

2) 세션 스토리지에 객체나 배열 저장 방법

로컬스토리지에 저장할 때는 key, value값을 사용하는데 객체나 배열도 저장할 수 있다.

// 저장할 객체
const user = {
    userName: 'Lia',
    age: 23,
}

// 저장할 배열
const userName = ['Lia', 'Minsu', 'Emaily'];

-------------------------------------------------

// Session Storage에 저장
sessionStorage.setItem('user', JSON.stringify(user));
sessionStorage.setItem('userName', JSON.stringify(userName));

// Session Storage에서 가져오기
const getUser = sessionStorage.getItem('user');
const userObj = JSON.parse(getUser);

const getUserName = sessionStorage.getItem('userName');
const userArr = JSON.parse(getUserName);

 

4. 그렇다면 쿠키(Cookie)는?

쿠키는 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 파일을 의미하는데, 쿠키는 아래와 같은 특징을 가지고 있다.

• 대부분의 브라우저가 지원
• 만료 시간 지정 가능, 유효시간 지정 가능
• 용량이 4KB로 매우 작음
• 암호화가 되어있지 않아 보안에 취약함
• 매번 서버에 HTTP 요청시 같이 전달되어 서버에 부담이 갈 수 있음
• 쿠키 팝업창, 로그인 자동 완성 등에 활용 가능

 

쿠키의 단점을 보완하기 위해 웹스토리지가 등장했고, 웹스토리지를 통해서 생각보다 다양한 것을 구현해볼 수 있다는 것을 알았다.