Develop record
[Javascript] localStorage 본문
- 현재 도메인의 로컬 저장소에 접근 할 수 있게 해주는 속성
- 로컬 저장소 : 웹브라우저에서 각 도메인에 대해 할당해주는 저장 공간
=> 데이터를 영구적으로 보관 가능 (브라우저를 껐다 켜거나 페이지를 새로고침해도 해당 페이지에 데이터가 남아 있도록 할 수 있음)
- 데이터 보관 시 : 데이터의 이름과 데이터의 실제 값을 각각 지정(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() //모든 데이터 삭제

'Programming Language > Javascript' 카테고리의 다른 글
[Javascript] 디지털 시계 만들기 (1) | 2024.01.14 |
---|---|
[Javascript] classList (1) | 2024.01.14 |
[Javascript] Timer (setTimeout, setInterval, clearInterval) (1) | 2024.01.14 |
[Javascript] 삼항 연산 (0) | 2024.01.14 |
[Javascript] value, preventDefault (1) | 2024.01.14 |