Local Storage & Session Storage란?

Local Storage & Session Storage란?

[ 목차 ]

1. Web Storage 개념

2. storage 이벤트

3. local Storage란?

4. session Storage란?

5. Web Storage & Cookie 비교

6. cookie가 아닌 Web Storage를 사용하는 이유

---

 

1. Web Storage 개념

localStorage와 sessionStorage

 

HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있습니다. Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴입니다. 그리고 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능합니다.

 

1-1. localStorage & sessionStorage 간단한 설명

 

localStorage

로컬 스토리지는 브라우저 내에서 영구적으로 데이터를 저장하는 데 사용됩니다. 저장한 데이터는 브라우저를 종료하거나 컴퓨터를 재시작해도 유지됩니다. 이는 사용자가 웹 애플리케이션을 떠났다가 나중에 돌아올 때 유용한 데이터를 저장할 때 유용합니다. 로컬 스토리지에 저장된 데이터는 JavaScript를 사용하여 접근하고 수정할 수 있습니다.

 

sessionStorage

세션 스토리지는 로컬 스토리지와 유사하지만, 여기에 저장된 데이터는 브라우저 세션이 유지되는 동안에만 유효합니다. 즉, 사용자가 브라우저를 닫거나 탭을 닫으면 해당 세션이 종료되며 세션 스토리지에 저장된 데이터도 삭제됩니다. 세션 스토리지는 잠깐 동안 유지해야 하는 데이터를 저장할 때 유용합니다.

 

두 스토리지 객체는 Map과 유사합니다. setItem/getItem/removeItem을 지원합니다. 하지만 인덱스를 사용해 키에 접근할 수 있다는 점(key(index))에서 차이가 있습니다.

 

1-2. localStorage & sessionStorage API

• setItem(key, value) – 키-값 쌍을 보관합니다.
• getItem(key) – 키에 해당하는 값을 받아옵니다.
• removeItem(key) – 키와 해당 값을 삭제합니다.
• clear() – 모든 것을 삭제합니다.
• key(index) – 인덱스에 해당하는 키를 받아옵니다.
• length – 저장된 항목의 개수를 얻습니다.
• Object.keys를 사용해 키 전체를 얻을 수 있습니다.
• 객체 프로퍼티처럼 키에 접근할 수 있는데, 이 경우 storage 이벤트가 발생하지 않습니다.

 

1-3. localStorage & sessionStorage 공통점

• 키와 값은 반드시 문자열이어야 합니다.
• 제한 용량은 5MB 이상인데, 브라우저에 따라 다를 수 있습니다.
• 파기되지 않습니다.
• origin(도메인·포트·프로토콜)에 묶여있습니다.

 

1-4. localStorage & sessionStorage 차이점

로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성입니다. 

	LocalStorage	SessionStorage
데이터 유지 측면	브라우저 종료시 데이터 보관, 재접속시 사용 가능	브라우저 종료시 데이터 삭제, 재접속시 사용 불가
데이터 범위 측면	도메인만 같으면 전역적으로 공유 가능	같은 브라우저라도 탭이 다르면 공유 불가

 

1-5. storage 이벤트

• setItem, removeItem, clear를 호출할 때 발생합니다.
• 연산(key/oldValue/newValue)과 관련된 데이터 전체와 문서 url, 스토리지 객체 storageArea를 가지고 있습니다.
• 이벤트가 생성된 곳을 제외하고 스토리지에 접근하는 모든 window 객체에서 일어납니다(sessionStorage는 탭 내에서, localStorage에서는 전역에서).

 

2. storage 이벤트란?

localStorage나 sessionStorage의 데이터가 갱신될 때, storage 이벤트가 실행됩니다.

 

2-1. storage 이벤트가 지원하는 프로퍼티

• key – 변경된 데이터의 키(.clear()를 호출했다면 null)
• oldValue – 이전 값(키가 새롭게 추가되었다면 null)
• newValue – 새로운 값(키가 삭제되었다면 null)
• url – 갱신이 일어난 문서의 url
• storageArea – 갱신이 일어난 localStorage나 sessionStorage 객체

2-2. 이벤트 발생 범위

여기서 중요한 점은 storage 이벤트가 이벤트를 발생시킨 스토리지를 제외하고 스토리지에서 접근 가능한 window 객체 전부에서 일어난다는 사실입니다. 두 개의 창에 같은 사이트를 띄워놨다고 가정해보면, 창은 다르지만 localStorage는 서로 공유됩니다.

두 창에서 모두 storage 이벤트를 수신하고 있기 때문에 한 창에서 아래 예시를 실행해 데이터를 갱신하면 다른 창에 해당 사항이 반영되는 것을 확인할 수 있습니다.

// 문서는 다르지만, 갱신은 같은 스토리지에 반영됩니다.
window.onstorage = event => { // window.addEventListener('storage', () => {와 같습니다.
  if (event.key != 'now') return;
  alert(event.key + ':' + event.newValue + " at " + event.url);
};

localStorage.setItem('now', Date.now());

 

2-3. event.url

storage 이벤트의 또 다른 중요한 특징은 event.url이 있어 데이터가 갱신된 문서의 URL을 알 수 있다는 점입니다.

 

2-4. event.storageArea

event.storageArea에는 스토리지 객체가 포함되어 있는데, storage 이벤트는 sessionStorage나 localStorage가 변경될 때 모두 발생하기 때문에 event.storageArea는 스토리지 종류에 상관없이 실제 수정이 일어난 것을 참조한다는 것 역시 중요한 특징입니다. 변경이 일어났을 때 우리는 event.storageArea에 무언가를 설정해 '응답’이 가능하도록 할 수 있습니다.

 

2-5. 메세지 교환 

이런 특징을 이용하면 origin이 같은 창끼리 메시지를 교환하게 할 수 있습니다. 모던 브라우저는 origin이 같은 창끼리 통신할 수 있도록 해주는 브로드캐스트 채널 API(broadcast channel API)를 지원합니다. 그런데 이 API는 기능은 풍부하지만, 아직 많은 곳에서 지원하지 않는다는 단점이 있습니다. 단점을 극복하게 해주는 localStorage 기반한 폴리필들이 있는데, 이런 라이브러리들은 브라우저와 관계없이 어디서든 창 간 메시지를 교환할 수 있게 해준다는 장점이 있습니다.

 

 

 

3. localStorage | 로컬 스토리지

로컬 스토리지는 window.localStorage에 위치합니다. key, value 저장소이기 때문에 key, value를 순서대로 저장하면 됩니다. 값으로는 문자열, 불린, 숫자, null, undefined 등을 저장할 수 있지만, 모두 문자열로 변환됩니다. key도 문자열로 변환됩니다.

 

3-1. localStorage의 주요 기능

• origin이 같은 경우 데이터는 모든 탭과 창에서 공유됩니다.
• 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않습니다.

 

3-2. localStorage API

 

1) 데이터 저장

localStorage.test = '123'; // 리터럴 방식
localStorage.setItem('test', '123'); // 메소드 방식

 

2) 데이터 불러오기

localStorage.test; // 리터럴 방식
localStorage.getItem('test'); // 메소드 방식

localStorage.getItem(); // 인자를 안주면, 전체 값 받아오기
localStorage.length // 항목 갯수 반환
localStorage.key(0); // 인자(인덱스)에 해당하는 key의 value값을 받아온다.

 

3) 데이터 삭제

localStorage.removeItem('test');// localStorage 객체에서 원하는 값을 지우는 방법
localStorage.clear();// 한번에 저장된 모든 값을 삭제하는 방법

 

4) 객체 형식으로 저장하기

localStorage.setItem('object', { a: 'b' });
localStorage.getItem('object'); // [object Object]

객체는 제대로 저장되지 않고 toString 메소드가 호출된 형태로 저장됩니다. [object 생성자]형으로 저장되는 거죠. 객체를 저장하려면 두 가지 방법이 있습니다. 그냥 키-값 형식으로 풀어서 여러 개를 저장할 수도 있습니다. 한 번에 한 객체를 통째로 저장하려면 JSON.stringify를 해야됩니다. 객체 형식 그대로 문자열로 변환하는 거죠. 받을 때는 JSON.parse하면 됩니다.

localStorage.setItem('object', JSON.stringify({ a: 'b' }));
JSON.parse(localStorage.getItem('object')); // { a: 'b' }

이렇게 데이터가 지우기 전까지는 계속 저장되어 있기 때문에 보안에 민감하지 않은 데이터들을 넣어두면 됩니다.

 

 

4. sessionStorage | 세션 스토리지

​sessionStorage의 session이라는 용어는 아주 우리가 일반적인 의미의 세션과는 좀 다릅니다. 보통 세션의 종료는 일반적으로 브라우저의 종료를 뜻합니다. 새창을(프로세스)띄우건 새탭을 띄우건 이는 세션종료를 의미하지 않습니다. 그러나 sessionStorage에서 의미하는 세션은 가장 작은 단위인 탭단위를 의미합니다. 탭마다 sessionStorage는 따로 배정되며 서로의 영역을 공유하지 않습니다. 따라서 값을 침범할 수 도 없습니다. 이러한 점에서 cookie가 가졌던 근본적인 문제인 도메인 같으면 항상 쿠키를 보낸다는 조건을 sessionStorage를 통해 해소하려 했다고 볼 수 있습니다.

 

세션 스토리지는 window.sessionStorage에 위치합니다. 로컬스토리지와는 다르게 데이터가 영구적으로 보관되지는 않을 뿐입니다. sessionStorage 객체는 localStorage에 비해 자주 사용되진 않습니다. 제공하는 프로퍼티와 메서드는 같지만, 훨씬 제한적이기 때문입니다.

• sessionStorage는 현재 실행되고 있는 탭 내에서만 유지됩니다.
  • 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장되기 때문입니다.
  • 그런데 하나의 탭에 여러 개의 iframe이 있는 경우엔 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유됩니다.
• 페이지를 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않습니다. 하지만 탭을 닫고 새로 열 때는 사라집니다.

 

5. Web Storage & Cookie 비교

Web Storage는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념입니다. web Storage에는 몇 가지 쿠키의 단점을 극복하는 개선점이 도입되었습니다. 그러나 쿠키는 여전히 유효하고 꽤 적절한 클라이언트 저장도구임에 틀림없습니다. HTML5 에서 Web Storage 스펙을 새로 추가했지만 이것이 쿠키를 배제한다는 의미는 아닙니다. 따라서 HTML5 에서도 여전히 쿠키 이용이 가능합니다.

 

document.cookie; // _ga=GAX.X.XXXXXXXXX; _gid=GAX.X.XXXXXXXXX; _gat=1

쿠키는 만료 기한이 있는 키-값 저장소입니다. document.cookie하면 현재 쿠키 정보가 나옵니다. 쿠키는 4kb 용량 제한이 있고, 매 서버 요청마다 서버로 쿠키가 같이 전송됩니다. 그 이유를 이해하기 위해서는 HTTP 요청에 대해 먼저 간단히 알아야 합니다. HTTP 요청은 상태를 가지고 있지 않습니다. 브라우저에서 서버로 요청을 보낼 때, 서버는 요청 자체만으로는 그 요청이 누구에게서 오는 지 알 수 없습니다. 이 때 쿠키에 요청자에 대한 정보를 담아서 서버로 보내면 서버는 쿠키를 읽어서 누가 요청한 것인지 파악합니다.  이렇게 쿠키는 처음부터 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 서버로 계속 전송됩니다.

 

하지만, 만약 4kb 용량 제한을 거의 다 채운 쿠키가 있다면, 요청을 할 때마다 기본 4kb의 데이터를 사용합니다. 4kb 중에는 서버에 필요하지 않은 데이터들도 있겠죠. 데이터 낭비가 발생합니다. 바로 그런 데이터들을 로컬 스토리지와 세션 스토리지에 저장할 수 있습니다. 이 두 저장소의 데이터는 서버로 자동 전송되지 않습니다. 

 

두 스토리지는 모두 window 객체 안에 들어 있습니다. Storage 객체를 상속받기 때문에 메소드가 공통적으로 존재합니다. 도메인 별 용량 제한도 있습니다.(프로토콜, 호스트, 포트가 같으면 같은 스토리지를 공유합니다) 브라우저별로, 기기별로 다르긴 하지만 모바일은 2.5mb, 데스크탑은 5mb~10mb라고 생각하시면 됩니다. 작다고 생각하실 수도 있지만 키-값만 저장하는 것이기 때문에 괜찮습니다. 쿠키가 4kb인것을 고려하면 상대적으로 꽤 큽니다. 

 

cookie & webStorage 특징 비교하기

특징	cookie	web storage
제한	용량제한, 시간제한, 갯수제한 존재	용량제한만 존재​
시간 제한 설정	시간 제한 설정 가능	시간제한 설정 불가능
데이터형	문자열만 저장 가능	자바스크립트 객체 저장 가능
데이터 전송	모든 쿠키를 전송, 쿠키를 가공함으로써 발생하는 사이드 이펙트 존재	개발자가 선택해서 전송할 수 있고 가공할 수 있음
세션의 정의	같은 브라우저면 다른 탭이나 다른 창일지라도 같은 세션이라고 정의	같은 브라우저일지라도 세션 스토리지의 경우 다른 탭이면 다른 세션이라고 정의
이벤트	이벤트 없음	이벤트 존재

 

 

6. cookie가 아닌 Web Storage를 사용하는 이유

1) 쿠키와 달리 서버에 전송되지 않는다.

웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송됩니다. Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않습니다. 이는 네트워크 트래픽 비용을 줄여 준다. 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있습니다. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해줍니다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있습니다.

 

2) 단순 문자열을 넘어(스크립트) 객체정보를 저장할 수 있다.

문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있다는 것은 개발 편의성을 제공해주는 주요한 장점이 됩니다. 

 

3) 용량의 제한이 없다.

쿠키는 개수와 용량에 있어 제한이 있습니다. 하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개입니다. 그리고 하나의 사이트에서 저장할 수 있는 최대 쿠키 크기는 4KB로 제한되어 있습니다. 그러나 Web Storage에는 이러한 제한이 없습니다. 

 

4) 비 영구적 데이터 저장이 가능하다.

브라우저가 종료되면 자동으로 사라지는 쿠키를 재현하기 위해서 sessionStorage를 도입하였습니다. sessionStorage의 존재로 세션이 유지되는 동안만 필요한 데이터를 저장할 수 있게 되었습니다.

 

5) HTTP 헤더를 통한 스토리지 객체 조작이 불가능하다.

쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것입니다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행됩니다. 

 

6) 필요에 따라 데이터 접근을 제한 할 수 있다.

쿠키는 domain별로 데이터가 분리되지만 같은 브라우저라면 값을 공유했습니다. 웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 origin에 묶여있습니다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없습니다. sessionStorage는 다른 탭이라면 데이터가 공유되지 않습니다. 만약 공유할 데이터는 localStorage에 저장하여 선택적으로 스토리지를 활용 할 수 있습니다.

 

7) storage event가 발생한다.

쿠키는 자신의 변화를 감지할 방법이 없습니다. 반면에 web storage는 자신의 변화를 이벤트로 감지할 수 있습니다.

 

---

참고 문서

(HTML&DOM) 로컬스토리지, 세션스토리지 - 그리고 쿠키

localStorage와 sessionStorage

[JS] 📚 LocalStorage / SessionStorage (vs 쿠키와 비교)

[web] LocalStorage, SessionStorage, Cookie의 차이점

[자바스크립트] 웹 스토리지 (localStorage, sessionStorage) 사용법