Local Storage , Session Storage란 무엇인가? 차이점과 사용방법

프로젝트 작업을 하면서 로컬스토리지에 값을 넣고 가져오는 작업을 하다가

사용법을 정리하게 되었다.

 

그전에 localStorage가 무엇인지 자세하게 알아보기로 했다.

 

먼저,

 

WEB STORAGE 란?

데이터를 서버가 아닌 클라이언트에 저장할 수 있도록 하는 기능이다.

쿠키와 비슷한 기능이지만, 쿠키 같은 경우에는 4kb까지밖에 저장공간을 가지지 못한다.

하지만 web storage는 대략 5mb의 저장공간을 가질 수 있다.

데이터의 구조는 key - value로 돼있으며, 문자열로만 저장 또는 반환된다.

 

 

Local Storage 란?

데이터를 브라우저에 반영구적으로 저장하며,

브라우저를 종료하고 다시 시작을 하더라도 데이터가 남아있다.

그리고 다른 창으로 띄운 브라우저에서도 접근이 가능하다.

 

 

데이터 넣기

자바스크립트를 통해서 localSorage에 데이터를 저장하고 값을 가져와 보겠다.

setItem으로 key와 value 값으로 localstorage에 저장할 수 있다.

localStorage.setItem("name","seon geon");
localStorage.setItem("age",32);

 

 

개발자도구창을 열어서 애플리케이션탭으로 들어가서

로컬스토리지에 들어가 보면 setItem으로 넣은 값들이 들어간 것을 볼 수 있다.

 

데이터 가져오기

그다음,

getItem에 key 값으로 가져올 수도 있다.

 

 

데이터 객체 또는 배열로 저장

만약 데이터를 데이터를 객체 또는 배열로 저장해서 사용하고 싶다면

JSON.stringify으로 변환시켜서 JSON 방식으로 사용해야 한다.

 

localStorage.setItem("userInfo", JSON.stringify({name : 'seon geon', age: '32'}));
console.log(JSON.parse(localStorage.getItem("userInfo")));

 

다시 개발자도구로 들어가서 로컬스토리지를 확인해 보면,

객체로 잘 들어가 있는 것을 볼 수 있다.

 

 

데이터 삭제

만약 로컬스토리지의 저장한 데이터를 삭제하려면,

remoceItem에 key 값으로 찾아서 삭제할 수 있다.

 

로컬스토리지 같은 경우는 삭제해주지 않으면 브라우저를 껐다 키더라도 남아있기 때문에

불필요한 데이터는 삭제해줘야 한다.  

전체를 삭제하기 위해서는. clear()를 사용하면 된다.

localStorage.removeItem("userInfo"); // key를 사용한 삭제
localStorage.clear(); // 전체 삭제

 

 

데이터 개수 구하기

로컬스토리지에 저장된 아이템의 개수를 확인하려면

length 속성을 사용하면 된다.

localStorage.length;

 

 

key 이름 찾기

key() 함수를 사용하여 index값을 파라미터로 전달하여서,

해당 index의 key 값을 조회해 볼 수 있다.

localStorage.key(index);

 

 

Session Storage 란?

세션스토리지 같은 경우는 로컬스토리지와 다르게 브라우저가 닫히면 데이터는 사라지게 된다.

그리고 다른 브라우저창을 띄우더라도 데이터 공유가 되지 않는다.

사용방법은 위에 사용법에서  localStorage를 sessionStorage로 변경만 하면 된다.

상황과 목적에 따라서 맞는 세션과 방식을 사용하면 될 것 같다.