[javascript] localStorage

mdn의 설명에 따르면 "현재 출처의 로컬 저장 공간에 접근할 수 있는 Storage 객체"

 

HTML5에서는 별도의 백엔드 서버가 없더라도 간단한 애플리케이션의 경우 로컬스토리지를 활용하여 저장 기능을 구현할 수 있다. '쿠키'의 원리가 확장되어 HTML5에서 추가된 기능인데, 웹 스토리지에는 로컬스토리지와 세션스토리지가 있다. 둘의 가장 큰 차이점은 영구적으로 저장될 수 있느냐인데, 세션스토리지의 경우에는 브라우저를 닫을 경우, 세션이 종료될 경우 저장된 데이터가 사라지는 특징이 있는 반면에 로컬스토리지에 저장된 정보는 따로 로컬스토리지를 비우지 않는 이상 데이터가 계속적으로 남아있게 된다. 나는 이 특징을 사용하여 My Colors 앱을 만들 때 백엔드 서버 없이도 간단한 저장 기능을 구현했다. 

 

localStorage에 저장한 자료는 페이지 프로토콜별로 구분되며, 특히 HTTP로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS와는 다른 localStorage에 저장되는 특징이 있다. 또, localStorage에는 문자열(String) 타입만 저장되므로 객체나 배열과 같은 데이터를 저장할 떄에는 JSON.stringify() 메서드를 사용해야 하는데, (JSON.stringify()는 값이나 객체를 JSON 형태의 문자열로 바꾸어주는 메서드.) 반대로 로컬스토리지에 있는 객체 값을 꺼내올 때에도 문자열 타입으로 꺼내올 것이 아니라면, 그러니까 본래의 객체 타입으로 꺼내오고 싶다면 JSON.parse() 메서드를 별도로 사용해주어야 한다.

 

사용 예제)

localStorage.setItem('saveColorList', JSON.stringify(showSaveList.concat({colors})))

 

JSON.parse(localStorage.getItem('saveColorList'))