[Web] 로컬 스토리지와 세션 스토리지

 

 

 

 

들어가며

언젠가 로컬 스토리지와 세션 스토리지의 차이는 무엇인지? 스토리지는 언제 쓰이는지 누군가 물었던 적이 있습니다. 이건 프론트엔드 개발자가 알아야 하는 거 아닌가? 하고 넘어갔는데, 웹 개발 분야에서 일하게 된다면, 당연히 알아야 하는 개념이 아닐까 생각했습니다. 더 늦기 전에, 웹의 기초에 대해 쌓고 싶어서 개념을 정리해보고자 합니다. 무지를 반성하는 마음으로 이 글을 적습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

로컬 스토리지, 세션 스토리지

로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소입니다. 스토리지를 활용하면 간단한 키와 값을 저장할 수 있습니다. 키-밸류 스토리지의 형태입니다.

 

로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성입니다. 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있지만, 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거됩니다. 지속적으로 필요한 데이터라면 로컬 스토리지에 저장하고, 잠깐 동안 필요한 정보는 세션 스토리지에 저장해서 활용하면 됩니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

로컬 스토리지(Local Storage)

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

 

localStorage.setItem('name', 'zerocho');
localStorage.setItem('birth', 1994);
localStorage.getItem('name'); // zerocho
localStorage.getItem('birth'); // 1994 (문자열)
localStorage.removeItem('birth');
localStorage.getItem('birth'); // null (삭제됨)
localStorage.clear(); // 전체 삭제

 

메서드를 간단히 설명하자면, localStorage.setItem(키, 값)으로 로컬 스토리지에 저장한 후, localStorage.getItem(키)로 조회하면 됩니다. localStorage.removeItem(키) 하면 해당 키가 지워지고, localStorage.clear() 하면 스토리지 전체가 비워집니다.

 

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

 

 

만약 로컬 스토리지에 객체를 저장한다면, 객체는 [object 생성자] 형으로 저장됩니다. 만약 스토리지에 객체를 저장하려면 두 가지 방법이 있습니다. 그냥 키-값 형식으로 풀어서 여러 개를 저장할 수도 있습니다. 또는 한 번에 한 객체를 통째로 저장하려면 JSON.stringify를 활용하는 방법이 있습니다. 이를 통해 객체 형식 그대로 문자열로 반환할 수 있습니다. 데이터를 객체 형태로 받아서 사용하고 싶다면 받을 때 JSON.parse를 활용하면 됩니다. 

 

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

 

로컬 스토리지는 데이터가 지우기 전까지는 계속 저장되어 있기 때문에 보안에 민감하지 않은 사용자 설정이나 데이터들을 저장하고 활용하면 됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

세션 스토리지(Session Storage)

세션 스토리지는 window.sessionStorage에 위치합니다. clear, getItem, setItem, removeItem, key 등 로컬 스토리지와 모든 메서드가 같습니다. 단지 로컬 스토리지와는 다르게 데이터가 영구적으로 보관되지는 않을 뿐입니다. 세션 스토리지는 각 세션마다 데이터가 개별적으로 저장됩니다. 예를 들어 브라우저에서 여러 개의 탭을 실행하면 탭마다 개별적으로 데이터가 저장되는 것입니다. 세션 스토리지는 로컬 스토리지와 다르게 세션을 종료하면 데이터가 자동으로 제거되며, 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없습니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

마치며

공부를 하며 그동안 아주 기초적인 것들을 제대로 공부하지 않았다는 것을 깨닫습니다. 좋은 기술을 배우는 것도 좋지만, 기술의 기반이 되는 기초적인 지식을 먼저 쌓는 것이 중요하다는 것을 다시금 깨달았습니다. 기초가 튼튼한 개발자가 되고 싶습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

출처

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

웹 스토리지 (Web Storage)의 특성과 사용법

쿠키, 세션, 로컬 스토리지, 세션스토리지, indexedDB, 캐시