localStorage

 

 

웹 스토리지(web storage)에는

세션 스토리지(sessionStorage)와 로컬 스토리지(localStorage)가 있습니다.

 

세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면에,

로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다.

 

로컬스토리지 사용하는 방법에 대해 학습해보겠습니다.

 

Method	Description
setItem()	로컬 스토리지에 키, 값을 추가한다.
getItem()	키에 맞는 값을 찾는다.
removeItem()	키에 맞는 값을 삭제한다.
clear()	로컬 스토리지에 저장된 모든 내용을 삭제한다.

 

 

// 키에 데이터 쓰기
localStorage.setItem("key", value)

// 키로 부터 데이터 읽기
localStorage.getItem("key")

// 키의 데이터 삭제
localStorage.removeItem("key")

// 모든 키의 데이터 삭제
localStorage.clear()

// 저장된 키/값 쌍의 개수
localStorage.length

 

 

 

문자형 데이터 타입만 지원하는 웹 스토리지.. 해결책은?

웹 스토리지는 오직 문자형(string) 데이터 타입만 지원합니다.
우리가 숫자를 저장해도 문자열로 형이 지정되어있는 것을 확인할 수 있습니다.
또한 객체형 데이터를 저장해도 우리가 이 localStorage 에서 데이터에 바로 접근하는 것은 어렵습니다.

> localStorage.setItem('num', JSON.stringify(1))
undefined
> JSON.parse(localStorage.getItem('num')) === 1
true
> localStorage.getItem('num')
"1"
> typeof localStorage.getItem('num')
"string"

> localStorage.setItem('obj', {a: 1, b: 2})
undefined
> localStorage.getItem('obj')
"[object Object]"

 

그렇다면 어떻게 해결해야할까요?
이러한 문제를 피하기위해서는 JSON 형태로 데이터를 읽고 쓰는 것입니다.

> localStorage.setItem('json', JSON.stringify({a: 1, b: 2}))
undefined
> JSON.parse(localStorage.getItem('json'))
{a: 1, b: 2} => string

 

JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다.
JSON.parse() 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성합니다. 두 번째 줄 코드를 보시면 getItem 을 json 이라는 key 를 가져오고, 이에 대한 구문을 분석해서 Javascript 객체를 형성한 것을 볼 수 있습니다.

 

 

 

 

 

 

[참고 블로그]

[JS] 로컬 스토리지 이해하고 활용하기

 

JavaScript에서 Local Storage를 사용하는 방법