localStorage ❓

자바스크립트로 개발 프로젝트를 진행하면 당연히 디비는 다른 도구의 도움을 받아야 한다고 생각했는데 holy....

localStorage 라는 게 있었다. 나만 몰랐던 듯.. 역시 여전히 배울 게 많다.  웹 스토리지에는 2가지가 있다. localStorage와 sessionStorage이다.

 

localStorage / sessionStorage

두 스토리지는 어떻게 다를까? 우리는 어떤 것을 어떤 때에 사용하는 것이 맞을까? 이 둘의 차이점은 데이터가 어떤 범위 내에서 오래 보존되는지이다. sessionStorage는 웹 페이지 세션이 끝나면 데이터가 지워지고, localStorage는 웹 페이지 세션이 끝나더라도 데이터가 지워지지 않는다. 오오 신기하다 🙆‍♀️

 

하지만 로컬 스토리지는 어디까지나 동일 컴퓨터, 동일 브라우저를 사용할 떄만 해당된다. 다른 컴퓨터나, 다른 브라우저를 사용할 경우에는 각각 두 개의 로컬 스토리지에 저장이 되기 때문이다.

 

기본 스토리지 API를 익혀두자!

 

// 데이터 넣기
localStorage.setItem('key', value)

// 데이터 가져오기
localStorage.getItem('key')

// 데이터 넣기
localStorage.removeItem('key')

// 데이터 넣기
localStorage.clear()

// 데이터 넣기
localStorage.length

 

 

 

👉 주의할 점!

웹 스토리지는 오직 문자형(string) 데이터 타입만 지원합니다. 때문에 오브젝트나, 리스트를 넣기 위해선 JSON.stringfy() 메소드를 이용해야 합니다. 그리고 이러한 문자를 가져올 때는 JSON.parse() 메소드를 쓰면 되겠죵!