Develop record

[Javascript] localStorage 본문

Programming Language/Javascript

[Javascript] localStorage

seong's log 2024. 1. 14. 04:48

- 현재 도메인의 로컬 저장소에 접근 할 수 있게 해주는 속성

- 로컬 저장소 : 웹브라우저에서 각 도메인에 대해 할당해주는 저장 공간

  => 데이터를 영구적으로 보관 가능 (브라우저를 껐다 켜거나 페이지를 새로고침해도 해당 페이지에 데이터가 남아 있도록 할 수 있음)

- 데이터 보관 시 : 데이터의 이름과 데이터의 실제 값을 각각 지정(key, value)

  => 문자열 형태의 데이터만 보관 가능

- 데이터를 읽거나 쓸 때에는 메소드를 이용해 접근 

- 이름이 같은 데이터(key가 같은)를 중복 저장 불가 => 이름이 같을 시 추후에 저장한 데이터로 덮어 씌워짐

메소드명 기능 사용 예
setItem 키와 밸류를 전달받아 저장 setItem("key","value")
getItem 전달받은 키에 해당하는 밸류를 반환 getItem("key")
removeItem 전달받은 키에 해당하는 데이터 삭제 removeItem("key)
clear 모든 데이터 삭제 clear()

 

setItem

const myName = "성이"

console.log(myName)

//저장 -> 영구 저장되어 파일에서 생성하지 않아도 됨
localStorage.setItem("myName", myName) //데이터의 이름, 실제 저장할 데이터

localStorage.setItem("cat", "고양이")
localStorage.setItem("dog", "강아지")
localStorage.setItem("myName", "엄혜성")

 

 getItem

//저장된 데이터를 불러오기
const myName = localStorage.getItem("myName")

alert(myName)

 

removeItem

localStorage.removeItem("dog") //key가 dog인 데이터 삭제

 

clear

localStorage.clear() //모든 데이터 삭제