[javascript] 웹 스토리지 (local storage & session storage)

데이터를 저장할 때 우리는 서버 측에 저장할 것인지 클라이언트 측에 저장할 것인지에 대해 선택하게 되는데요.

오늘은 클라이언트 측에 정보를 저장할 수 있는 방법 중에서  브라우저 상에 데이터를 저장하고 사용할 수 있는 웹 스토리지 에 대해 알아보려합니다.

개발자 도구 페이지에서 애플리케이션을 누르면 볼 수 있는 Local storage와 Session Storage.

 

1. 웹스토리지?

 

 웹 스토리지는 HTML5부터 생긴 새로운 기능입니다. (HTML5 지원않는 브라우저인 경우에는 사용이 불가합니다.) 저장 시에는 키-밸류의 형태를 사용합니다. 키는 언제나 String 값인데 참고내용에 따르면, 숫자(int) 등의 값으로 적는다고 해도 저장 시에는 키 값이 자동으로 String으로 변환되어 저장된다고 합니다.  

 

쿠키와 기능은 유사하지만 서버에 전송되지않고, 유효기간도 없습니다. 그리고 쿠키가 최대 4KB인데 반해 웹스토리지는 약 *5MB(단, 브라우저마다 차이 있음)까지 저장할 수 있습니다. 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것입니다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행됩니다.

그 외, 웹스토리지는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있기 때문에 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없습니다. 

 

 웹스토리지는 지속성에 따라 (1) 로컬스토리지와 (2) 세션스토리지로 나뉘는데, 두 스토리지는 동일한 메소드를 제공합니다. 메소드는 아래와 같습니다.

Storage.setItem("myName", "김뫄뫄"); // 저장.
Storage.getItem("myName"); // 호출. 김뫄뫄라는 값을 가져옴
Storage.removeItem("myName"); // 삭제. myName이라는 키 값으로 저장된 김뫄뫄 값을 삭제함.
Storage.clear(); //스토리지 전체 삭제.
Storage.length; //스토리지에 저장된 아이템들 length 확인 ex) 0 ,5, 10 .. 
Storage.key(i);//인덱스(i)에 해당하는 키를 받아옴. 그러나 Storage 객체는 iterable 객체가 아님. > 반복문으로 접근.
//Strorage부분에
//(1) 로컬 스토리지인경우  localStorage ,(2) 세션스토리지인 경우 sessionStorage 넣어서 사용.
// ex) localStorage.setItem / sessionStorage.getItem("~")

setItem 메소드의 경우 이런 식으로도 사용할 수 있습니다.

Storage.myName = '김뫄뫄';
Storage['myName'] = '김뫄뫄';
Storage.setItem('myName', '김뫄뫄');
//3개 모두 myName이라는 key로 '김뫄뫄'라는 value를 저장하고 있다

 

2.차이점 

위에서 이미 지속성을 기준으로 웹스토리지는 세션스토리지와 로컬스토리지로 나뉜다고 말씀드렸는데요. 

로컬스토리지는 데이터를 저장하게 되면 브라우저를 종료하게 되어도 데이터가 소실되지않고 반영구적으로 저장됩니다. 그에 반해, 세션스토리지는 탭 윈도우 단위로 데이터를 저장하기 때문에 탭을 닫게되면 데이터가 자동으로 삭제됩니다. 

	데이터 공유 범위	데이터 지속성
로컬 스토리지	(오리진이 같은) 탭, 창 전체. >동일 도메인 전역 공유.	브라우저,OS 종료 시에도 데이터 보관.
세션 스토리지	(오리진이 같은) 브라우저 탭,iframe. >브라우저 간 공유 불가능.	탭 닫을 때 데이터 자동삭제.

 

이런 차이를 활용하여 개발 시 필요한 웹 스토리지 객체를 선택하여 자동 로그인, 장바구니 보관 등의 기능을 개발하게 됩니다. 자세한 내용은 아래 링크 추가적으로 참고 바랍니다. 

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

Using the Web Storage API - Web APIs | MDN

https://html.spec.whatwg.org/multipage/

HTML Standard

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Window.localStorage - Web APIs | MDN

https://ko.javascript.info/localstorage

localStorage와 sessionStorage

https://ryuhojin.tistory.com/10?category=1050330 

브라우저 저장소( 로컬 스토리지, 세션 스토리지, 쿠키 )