JavaScript 데이터 실습 - Storage

브라우저에서 F12키를 누른 후 Application 탭을 누르면 Storage들이 보인다.

로컬 저장소는 반 영구적으로 사용이 가능하지만

세션 저장소는 브라우저 페이지를 닫게 되면 사라지게 된다.

 

localStorage.setItem(key, value)

: 로컬 저장소에 키 값을 저장하는 함수

key와 value는 문자데이터로 저장하는 것이 권고됨. (JSON.stringify() 활용)

 

만약 key와 value 값을 그대로 저장하게 되면 다음과 같이 값이 제대로 저장되지 않는다.

const user = {
  name: 'Riam',
  age: 72,
  emails: [
    'Claudette@morrel.com',
    'Riam@tistory.com'
  ]
}

localStorage.setItem('user', user)

object요소인 Object 라고 뜬다.

const user = {
  name: 'Riam',
  age: 72,
  emails: [
    'Claudette@morrel.com',
    'Riam@tistory.com'
  ]
}

localStorage.setItem('user', JSON.stringify(user))

객체가 제대로 삽입된 모습

저장된 것은 문자형 데이터지만, 브라우저에서 자동적으로 해석하여 JS 객체데이터로 인식하는 모습이다.

 

localStorage.getItem('key')

: 로컬 저장소에 저장된 JSON 문자열을 'key'를 토대로 가져오는 함수.

가져온 것은 문자형 데이터이므로 이를 사용하려면 JS 데이터로의 변환이 필요하다.

const user = {
  name: 'Riam',
  age: 72,
  emails: [
    'Claudette@morrel.com',
    'Riam@tistory.com'
  ]
}

localStorage.setItem('user', JSON.stringify(user))

console.log(localStorage.getItem('user')) // 그냥 가져오는 경우

그냥 가져오게 되면 문자형 데이터가 넘어온다.

const user = {
  name: 'Riam',
  age: 72,
  emails: [
    'Claudette@morrel.com',
    'Riam@tistory.com'
  ]
}

localStorage.setItem('user', JSON.stringify(user))

console.log(JSON.parse(localStorage.getItem('user')))

JSON.parse()로 후처리를 해준 모습

 

localStorage.removeItem('key')

: 로컬 저장소에 저장된 값을 삭제하는 함수.

 

Local Storage 의 값 수정하기

const user = {
  name: 'Riam',
  age: 72,
  emails: [
    'Claudette@morrel.com',
    'Riam@tistory.com'
  ]
}

localStorage.setItem('user', JSON.stringify(user))

const str = localStorage.getItem('user')
const obj = JSON.parse(str)
obj.age = 22
console.log(obj)
localStorage.setItem('user', JSON.stringify(obj))

localstorage에 있는 값들은 반 영구적으로 남아있게 된다.

이를 수정하기 위해서는 값을 가져온 후 parse로 수정하고 다시 저장하는 과정을 거쳐야 한다.

 

lowdb는 이러한 일련의 storage 관련 작업을 보조해주는 패키지이다.

(Lodash 기반 패키지 언어)

 

typicode/lowdb: Simple to use local JSON database. Powered by plain JavaScript (supports Node, Electron and the browser) (github.com)

GitHub - typicode/lowdb: Simple to use local JSON database. Powered by plain JavaScript (supports Node, Electron and the browser

[참조: lowdb Github]