Storage [패스트캠퍼스 챌린지 11일차]

Storage

브라우저에 데이터를 저장할 수 있는 서버

f12 (개발자 도구) → Application → Storage (Local&Session)

중점

1. Local storage & Session storage
2. 어떻게 활용?

Window.localStorage

localStorage를 사용하면 Storage 객체에 접근할 수 있다. 저장한 데이터는 브라우저 세션 간에 공유된다.

localStorage에 저장되는 데이터는 해당하는 도메인 주소에 종속돼서 저장이 되는 거임.

→ 쉽게 생각하면 사이트에 종속이 되는 개념

---

localStorage와 sessionStorage는 기본적으로 브라우저에 데이터를 저장할 수 있는 스토리지라는 점에서 비슷하지만 아래와 같은 차이점이 존재하며 나름대로의 장단점을 가짐.

localStorage

데이터는 만료되지 않음.

(따로 지우지 않는 이상 로컬 스토리지의 데이터는 반영구적으로 사용할 수있음)

sessionStorage

페이지 세션이 끝날 때 즉, 페이지를 닫을 때 데이터가 사라짐

페이지를 닫을 때 데이터를 지워버려야하는 상황이 아니고서는 일반적인 상황에서는 localStorage가 훨씬 더 활용성이 높음

기본적인 사용법 - 예제

localStorage.setItem(Key, Value)
localStorage.getItem(Key)
localStorage.removeItem(Key)

localStorage객체에 항목 추가하는 방법

• localStorage.setItem(Key, Value)
• 인수들은 되도록이면 문자데이터 형태로 입력
• 배열데이터, 객체데이터는 어떻게 문자로 저장하죠?
  → JSON.stringify 이용해서 문자데이터화 시켜서

이렇게 추가한 localStorage 항목을 읽는 방법은?

• localStorage.getItem(Key)

  const cat = localStorage.getItem('myCat')

항목 제거하는 방법?

• localStorage.removeItem(Key)

localStorage.removeItem('myCat')

VS Code연습

JSON.stringify()와 JSON.parse()를 어떻게 활용하나?

그냥 객체 데이터를 인수로 넣으면 개발자 도구에서 제대로 저장되지 않음.

→ 문자데이터화 해주자!

const user = {
  name: 'Happy',
  age: 77,
  emails: [
    'happy@birthday.com',
    'joyful@birthday.com'
  ]
}
//localStorage.setItem('user', user) -> 이거 잘못된 거
localStorage.setItem('user', JSON.stringify(user))

이런 식으로 나옴

로컬 스토리지에 저장된 내용을 다시 JS에 가지고 와서 콘솔에 출력해보자.

→문자데이터 형태로 출력됨

const user = {
  name: 'Happy',
  age: 77,
  emails: [
    'happy@birthday.com',
    'joyful@birthday.com'
  ]
}

localStorage.setItem('user', JSON.stringify(user))
console.log(localStorage.getItem('user'))

/* 
{"name":"Happy","age":77,"emails":["happy@birthday.com","joyful@birthday.com"]}
*/

JS에서 쓰기 좋은 객체데이터로 변환해보자

const user = {
  name: 'Happy',
  age: 77,
  emails: [
    'happy@birthday.com',
    'joyful@birthday.com'
  ]
}

localStorage.setItem('user', JSON.stringify(user))
console.log(JSON.parse(localStorage.getItem('user')))

//{name: 'Happy', age: 77, emails: Array(2)}

localStorage.removeItem( ) 사용 예제

const user = {
  name: 'Happy',
  age: 77,
  emails: [
    'happy@birthday.com',
    'joyful@birthday.com'
  ]
}

localStorage.setItem('user', JSON.stringify(user))
console.log(JSON.parse(localStorage.getItem('user')))
localStorage.removeItem('user')

//{name: 'Happy', age: 77, emails: Array(2)}

결과적으로 콘솔에 내용은 남았지만,

스토리지에는 데이터가 지워짐

반영구적으로 저장?

setItem으로 저장한 데이터는

localStorage.setItem(~~) 이 코드를 지우고 저장해도

여전히 local Storage에 남아있음

저장한 데이터를 수정하고 싶으면

age를 77 → 22로 만들어 보자

const user = {
  name: 'Happy',
  age: 77,
  emails: [
    'happy@birthday.com',
    'joyful@birthday.com'
  ]
}
//앞에 예제 하면서 setItem으로 이미 스토리지에 user 정보 저장되어 있음
//그래서 지금은 getItem으로 가져오기만 함
//이해하기 쉽게 변수를 이용
const str = localStorage.getItem('user') 
const obj = JSON.parse(str) 
console.log(obj)

//아직은 age가 77이죠?
/* 콘솔
{name: 'Happy', age: 77, emails: Array(2)}
*/

콘솔에는 77 → 22로 변경됨을 확인

const user = {
  name: 'Happy',
  age: 77,
  emails: [
    'happy@birthday.com',
    'joyful@birthday.com'
  ]
}
const str = localStorage.getItem('user') 
const obj = JSON.parse(str) 
obj.age = 22
console.log(obj)
//{name: 'Happy', age: 22, emails: Array(2)}
//아직 스토리지에 저장된 나이는 77

수정된 obj라는 데이터를 다시 로컬 스토리지의 user라는 부분에 데이터로 저장해줘야 함 (덮어쓰기)

const user = {
  name: 'Happy',
  age: 77,
  emails: [
    'happy@birthday.com',
    'joyful@birthday.com'
  ]
}
const str = localStorage.getItem('user') 
const obj = JSON.parse(str) 
obj.age = 22
console.log(obj)
//localStorage.setItem('user', obj) -> 이거 아니야. 문자데이터화 해야 함
localStorage.setItem('user', JSON.stringify(obj))
// 스토리지 내의 데이터도 22로 수정되었음

---

! 그런데 이렇게 데이터를 다루는 방식은 원시적이기 때문에 !

lowdb의 기능을 이용하면 더 괜춘함

Lowdb 깃헙

나중에 읽어보고 활용해보자

db : database

Lowdb is powered by Lodash

GitHub - typicode/lowdb: Simple to use local JSON database (supports Node, Electron and the browser)

---

엘사와 함께 into the unknown
내일도 함께 정규표현식 배우러 가자...

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online