[TIL] 24_0111 로컬 스토리지

상세페이지 만들기

이번엔 저번 영화 카드를 만드는 것에 살을 덧붙여서 해당 카드의 매개체를 클릭해서 해당 카드의 상세한 내용을 담는 상세페이지를 만들기로 했어.

로컬 스토리지

- 로컬 스토리지를 이용해서 해당 영화의 상세페이지 내에서 입력된 값을 저장해서 다시 보여주는 걸 이용했어.

- localStorage는 웹 스토리지 객체야. 키와 값을 쌍으로 저장하게 해줘. 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있어. 하지만 그렇게 큰 공간은 아니어서 많은 정보보다 용량이 적은 정보만을 저장할 수 있을 정도야.

 

저장할 땐, localStorage의  내장 함수인 setItem()을 써.

localStorage.setItem(key값, value값)

 

이런 식으로 저장돼.

[
  {
    "name": "Molecule Man", 
    "age": 29,
    "secretIdentity": "Dan Jukes",
    "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
  }
]

 

 

저장한 데이터를 가져올 땐, localStorage의 내장함수 getItem()을 써.

localStorage.getItem(key값)

 

 

localStorage에 저장한 데이터를 지울 땐, localStorage의 내장함수 removeItem()를 사용해.

localStorage.removeItem()

 

 

느낀점

- 사용하기 쉬운 함수지만 데이터를 주는 형식과 받는 형식을 잘 고려해야 하는 것 같아. 

- 데이터를 넣어줄 때 객체로 줘야 받아서 보기 편한 것 같아.