Web

localStorage

noeul_noeul__ 2024. 5. 7. 23:22

웹 스토리지 객체인 locarStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다. 

이를 사용하면 페이지를 새로 고침하고 심지어 브라우저를 다시 실행해도 데이터가 사라지지 않고 남아있다.

 

로컬 스토리지는 해당 메서드와 프로퍼티를 제공한다.

  • setitem(key, value) - 키- 값 쌍의 보관.
  • getitem(key) - 키에 해당하는 값을 받아온다. 
  • removeitem(key) - 키와 해당 값을 삭제.
  • clear() - 모든 것을 삭제.
  • key(index) - 인덱스에 해당하는 키를 받아온다.
  • length - 저장된 항목의 개수를 얻는다. 
  • setItem(key, value) – 키-값 쌍을 보관합니다.
  • getItem(key) – 키에 해당하는 값을 받아옵니다.
  • removeItem(key) – 키와 해당 값을 삭제합니다.
  • clear() – 모든 것을 삭제합니다.
  • key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
  • length – 저장된 항목의 개수를 얻습니다.

로컬스토리지는 맵과 비슷한 점이 있다. 하지만 인덱스를 사용해 키에 접근할 수 있다는 점에서  차이를 갖는다. 

 

로컬스토리지의 주요 기능.

오리진이 같은 경우 데이터는 모든 탭과 창에서 공유된다. 

브라우저나 OS가 재시작하더라도 데이터가 파기되지 않는다. 

 

키로 순회하기.

로컬스토리지는 '키'를 사용해 값을 얻고, 설정하고, 삭제할 수 있게 해준다. 

전체 값을 얻기 위해선, 이터러블 객체가 아니기 때문에 배열처럼 다루면 전체 키-값을 얻을 수 있다. 

(for문을 통한 전체 인덱스 순회, 아니면 Key in문을 통하여 전체 키-값 순회. 후자의 경우 필요하지 않은 내장 필드까지 출력되어 

추천되지 않는다.)

 

문자열만 사용.

로컬스토리지의 키와 값은 반드시 문자열이어야 한다. 

숫자나 객체 등 다른 자료형을 사용하게 되면 문자열로 자동 변환된다.

'Web' 카테고리의 다른 글

IPv6  (0) 2024.05.10
IP와 포트.  (0) 2024.05.08
Import와 export  (0) 2024.05.03
Semantic code  (0) 2024.05.02
git 사용 중인 문법 정리  (0) 2024.05.01