[JavaScript]웹 스토리지 Storage - localStorage vs sessionStorage

[ 웹 스토리지 Storage ] 

 

 웹 개발을 하다보면 사용자 정보나 게시글 정보와 같이 영구적으로 지속되어야 하는 데이터들은 서버의 데이터베이스(DB) 또는 클라우드 플랫폼에 저장해야합니다. 

 

 하지만 저장해야할 데이터가 그다지 중요하지 않거나 유실되도 무방한 데이터라면 클라이언트 측인 브라우저 상에서 데이터를 저장할 수 있는데, 이때 사용되는 기술이 바로 웹 스토리지입니다. 

 

 웹 스토리지는 localStorage와 sessionStorage로 구분할 수 있습니다. 

 

 sessionStorage에 저장된 데이터는 웹 페이지의 세션이 끝나면, 즉 웹 페이지의 탭이나 창을 닫으면 소멸됩니다. 

 

 반면 localStorage에 저장된 데이터는 웹 페이지의 세션이 끝나도 소멸되지 않고 남게됩니다. 다만, 동일한 컴퓨터와 동일한 브라우저를 사용할때만 해당 데이터를 접근할 수 있습니다. 

 

 웹 스토리지는 개발자 도구의 '응용 프로그램' 탭에서 확인할 수 있습니다. 

 

 

 

 

 

[ Storage API ] 

 

 웹 스토리지는 키(key)와 값(value)으로 이루어진 데이터를 저장할 수 있으며, 문자 데이터로 저장하는 것을 권장합니다. 

 

 

1. localStorage.setItem()

 

 setItem() 은 웹 스토리지에 데이터를 저장해줍니다. 이때 만약 인수로 넘겨준 데이터가 객체 데이터라면 문자 데이터로 변환해서 넣어주어야 합니다. 

 

기본형

localStorage.setItem(key, value)

 

const user = {
  name: 'neo',
  age: 20,
  major: 'computer science',
  emails: ['hello@naver.com', ]
}

const str = JSON.stringify(user) //문자 데이터화
localStorage.setItem('user', str)

 

 

 

 

2. localStorage.getItem()

 

 getItem()은 인수로 넘겨준 key에 해당하는 value를 문자 데이터로 반환합니다. 

 

기본형

localStorage.getItem(key)

 

const res = localStorage.getItem('user')
console.log(res)

 

 

 

 

3. localStorage.removeItem()

 

 removeItem()은 인수로 넘겨준 key에 해당하는 데이터를 웹 스토리지에서 제거합니다.

 

기본형

localStorage.removeItem(key)

 

localStorage.removeItem('user')

 

 

 

4. localStorage.clear()

 

clear()는 웹 스토리지의 모든 데이터를 제거합니다. 

 

기본형

localStorage.clear()

 

 

 

 

5. localStorage.length

 

 웹 스토리지의 저장된 key & value 쌍의 개수를 반환합니다. 

 

기본형

localStorage.length

 

localStorage.setItem('key1', 'value1')
localStorage.setItem('key2', 'value2')
localStorage.setItem('key3', 'value3')

console.log(localStorage.length)   // 3