코딩 기록

Web Storage(localStorage, sessionStorage) 개요와 사용법


웹 응용 프로그램 개발에 localStorage와 sessionStorage 등 Web Storage를 사용하는 경우가 많아지고 있습니다.

이 글에서는 웹 스토리지에 대한 개요와 사용 방법을 정리해 소개합니다.


Web Storage 란 무엇인가

브라우저의 로컬 영역에 key-value 형식의 데이터를 저장하는 구조입니다. Web Storage의 사양을 지원하는 브라우저는 Web Storage API를 사용할 수 있습니다. JavaScript에선 API를 이용해 Web Storage에 액세스(접근)할 수 있습니다.

저장할 수 있는 데이터 형식은 문자열만으로 오리진으로 구분된 저장 영역(5MB까지)을 보유하며, 다른 오리진의 웹 스토리지에 액세스 할 순 없습니다.


"오리진"에 대해 조금 구체적으로 설명하면,


  • URL 체계 (eg. http, https)
  • 호스트 (eg. example.com 등의 도메인)
  • 포트 (eg. 80, 443)


위의 모든 항목이 같은 경우, Web Storage에 액세스하여 데이터를 추가 삭제할 수 있습니다.


예를 들어, 다음 두 개의 URL은 같은 오리진으로 Web Storage가 공유됩니다.


https://example.com/main/index.html 

https://example.com/sub/index.html


또한, 다음 주소는 도메인이 다르기 때문에(오리진이 다름) 서로의 웹 스토리지에 액세스할 수 없습니다.


https://example1.com/index.html 

https://example2.com/index.html


하위(서브) 도메인에서도 Web Storage는 다릅니다.


https://app1.example.com/index.html 

https://app2.exapmle.com/index.html


쉽게 말하면 같은 웹 사이트에서 공동의 앱 내부라면 사용할 수 있다는 것입니다.


Web Storage는 2020년 현재 모바일을 포함한 대부분의 현대(모던) 브라우저가 지원합니다만, 정확한 정보는 여기를 참고하시기 바랍니다.


상호 접근 가능한 상황 예시상호 접근 가능한 상황 예시


실제로 Web Storage를 사용하는 모습을 확인할 수 있습니다. Google Chrome의 경우 개발자 도구의 콘솔을 열고 Application 탭> 왼쪽 메뉴 Storage에서 Local Storage 또는 Session Storage를 클릭하여 크롬 스토리지 내용을 볼 수 있습니다.


여기까지의 내용은 다음의 문서를 참고하시기 때문에 자세히 알고 싶은 분은 한번 읽어보십시오.




localStorage와 sessionStorage

웹 스토리지엔 2가지 타입이 있습니다.


로컬 스토리지

  • 저장된 데이터는 삭제하지 않는 한 영구적으로 저장됨 (없어지지 않음)
  • 다른 탭이나 창에서 공유 가능
  • 브라우저를 닫거나 다시 열어도 데이터는 남음


sessionStorage

  • 저장된 데이터는 브라우저를 닫을 때까지만 저장됨
  • 다른 탭이나 창에서도 공유되지 않음


용도

어떤 유스 케이스(활용 사례)가 있을까요? 사실, 간단하고 편리하다는 것 때문에 여러 가지 용도로 사용되고 있습니다만, 잘 보이는 케이스를 일부 언급해 보면 다음과 같은 것들이 있습니다.


  • 표시에 관한 각종 설정 정보 (eg. 공지 사항, 알림 표시 유무)
  • 사용자의 조작이나 작업(액션) 정보 (eg. 즐겨찾기, 열어본 페이지, 상품)
  • 클라이언트 측의 사용량을 정리하여 서버에 전송하기 전 일시 보관 (eg. 에러 ID를 정리해 로그 서버로 전송)
  • 서버와의 데이터 불일치를 방지하기 위한 버전 정보 (데이터 정합성)


일반적으로 localStorage를 사용하는 경우가 많다고 생각합니다. 또한, 모든 상황에서 사용 시 문제없는 것은 아닙니다. 다른 글을 통해 꼭 확인해 보세요. 이 글에선 다루지 않습니다.

Cookie와 차이점은?

클라이언트 측에서 데이터를 저장하는 시스템으로 Cookie와 비슷한 느낌을 가질지도 모르겠습니다. 만약을 위해 간단히 언급하려고 합니다.


구조

Cookie는 서버와 HTTP 통신할 때마다 HTTP 헤더에 포함되어 전송되고, 서버 측에서 설정할 수도 있습니다. 따라서 서버와 상호 작용에 따른 상태를 관리하는 데 사용되는 경우가 많습니다. (서버와의 세션 관리 등)


한편, Web Storage는 서버와의 통신에 관계없이 클라이언트(브라우저)에서만 데이터를 유지합니다.


용량 제한

Cookie는 4KB, Web Storage는 5MB입니다.


JavaScript 활용한 제어

일반적으로 Cookie, 웹 스토리지는 JavaScript로 조작할 수 있습니다.


그러나 Cookie는 httponly 특성을 붙여 JavaScript에서 작업하는 것을 막을 수 있습니다. 이는 악의적인 의도를 가진 제3자가 임의로 JS 실행(eg. XSS : Cross Site Scripting)할 수 있기 때문입니다. 이 같은 경우에도 Cookie 내용을 JavaScript를 통해 볼 수 없습니다.


Web Storage의 경우 이런 기능은 없습니다.


이외에도 Cookie에는 다양한 속성(domain, path 만료 ... etc.)이 준비되어 있어서 동작을 세밀하게 제어할 수 있습니다.


크롬 개발자 도구 - F12크롬 개발자 도구 - F12

기본적인 사용법

웹 스토리지 API를 사용합니다. 로컬 스토리지, 세션 스토리지도 마찬가지로 Storage 인터페이스를 구현하는 형태로 되어 있으며, 사용법은 동일합니다.


// Storage.setItem (key, value) 

// Storage.getItem (key)


localStorage.setItem ( 'dummy_key' , 'dummy_value' ); 

const item1 = localStorage.getItem ( 'dummy_key' );


console .log (item1); // dummy_value


sessionStorage.setItem ( 'dummy_key' , 'dummy_value' ); 

const item2 = sessionStorage.getItem ( 'dummy_key' );


console .log (item2); // dummy_value


웹 스토리지의 key와 value로 사용할 수 있는 데이터 형식은 문자열(string) 뿐입니다. 배열이나 객체 형태로 데이터를 저장하려면 일단 JSON 문자열로 변경하고 저장합니다.


localStorage.setItem('dummy_key_2', JSON.stringify({ name: 'John', age: 20 }));

const item3 = localStorage.getItem('dummy_key_2');


const parsed1 = JSON.parse(item3); // {"name":"John","age":20}


sessionStorage.setItem('dummy_key_2', JSON.stringify({ name: 'John', age: 20 }));

const item4 = sessionStorage.getItem('dummy_key_2');


const parsed2 = JSON.parse(item4); // {"name":"John","age":20} 객체 저장


저장된 데이터를 삭제할 수도 있습니다.


// Storage.removeItem(key)

// Storage.clear()


localStorage.removeItem('dummy_key');

sessionStorage.removeItem('dummy_key');


// 모두 삭제한다

localStorage.clear();   // 로컬 스토리지 삭제

sessionStorage.clear(); // 세션 스토리지 삭제


어떻습니까?


Web Storage는 심플하면서도 활용 방법이 많아 매우 편리하지만 몇 가지 주의 사항도 있습니다. 이에 대해서는 다른 분의 글을 참고하는 걸 추천합니다. 꼭 확인해 보세요.



귀엽게 잘 먹는 크롬귀엽게 잘 먹는 크롬


끝까지 읽어 주셔서 감사합니다.


브라우저 크롬 관련 글



댓글(0)