JavaScript (localStorage / sessionStorage)

1. localStorage , sessionStorage ?

사용자의 로컬에 데이터를 저장하는 방법으로 "localStorage" , "sessionStorage" API가 제공된다.

보통 웹사이트의 정보를 저장하기 위해서는 필요로 하지만, 그 용도에 따라 클라이언트 저장소에 편리하게 저장할 수도 있다. 이들은 단순히 key와 value가 문자열로 저장되며, 도메인과 브라우저 별로 데이터를 저장한다.

 

• localStorage: 직접 삭제를 하지않으면 계속 데이터가 유지된다.
• sessionStorage: 동일한 세션에서만 사용이 가능한 저장소로, 브라우저를 닫으면 데이터가 삭제된다.

이 둘은 저장소로서의 기능은 대부분 동일하며, 차이점을 꼽자면 sessionStorage의 경우 세션이 종료되면 저장되었던 데이터들도 함께 사라진다는 점이다.

 

2. localStorage , sessionStorage 장점

: 쿠키의 경우 저장 가능한 공간의 크기가 가장 작고 하나의 텍스트 형태로 저장된다. 그렇기 때문에 비교적 간단한 텍스트 타입의 데이터를 저장하는데 용이하다.  서버 저장소는 데이터의 동기화가 필요하기 때문에 꼭 필요한 경우가 아니라면 전송을 최소화하는 것이 좋으며, 이런 이유로 서버 저장소는 데이터의 크기가 매우 크거나 반드시 저장해야하는 필요성을 느낄 경우에만 사용하는 것이 좋다는 것이다.

 

하지만 데이터의 크기와 만료시간을 생각했을 때 위 저장소들의 활용도가 애매한 경우도 있다. 저장소는 필요하지만 다수의 컬럼이 필요한 경우가 아닌 단순한 형태라면 "localStorage"와 "sessionStorage"를 사용하는 것이 효과적이다.

 

3. localStorage 활용 

setItem() - 데이터 저장

localStorage.test = '123'; // 방법 1
localStorage.setItem('test', '123'); // 방법2 -> test:key / 123:value

 

getItem() - 데이터 불러오기

localStorage.test; //방법1
localStorage.getItem('test'); //방법2
localStorage.getItem();  //localStorage에 담겨있는 모든 데이터 불러오기

 

removeItem() - 데이터 삭제

localStorage.removeItem('test'); // 원하는 값을 삭제하는 방법
localStorage.clear(); // 저장된 모든 값을 삭제하는 방법

 

※sessionStorage의 활용방법도 이와 유사함.