웹 브라우저가 제공하는 기능(API) 중
localStorage 객체 : 웹 브라우저에 데이터를 저장
https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage 참고하기~
이 객체의 메소드
localStorage.getItem(key): 저장된 값을 추출한다. 없으면 undefined 출력
객체의 속성을 localStorage.key 또는 localStorage[key] 형태로 사용한다.
localStorage.setItem(key, value): 값을 저장한다.
localStorage.removeItem(key): 특정 키의 값을 제거한다.
localStorage.clear(): 저장된 모든 값을 제거한다.
Example
<script>
document.addEventListener('DOMContentLoaded', () => {
const p = document.querySelector('p')
const input = document.querySelector('input')
const button = document.querySelector('button')
const saveValue = localStorage.getItem('input')
if (saveValue) {
input.value = saveValue
p.textContent = `last value: ${saveValue}`
}
input.addEventListener('keyup', (event) => {
const value = event.currentTarget.value
localStorage.setItem('input', value)
})
button.addEventListener('click', (event) => {
localStorage.clear()
input.value = ''
})
})
</script>
<body>
<p></p>
<button>remove</button>
<input type="text">
</body>'JavaScript' 카테고리의 다른 글
| 09 -2 게터(getter)와 세터(setter), static 속성과 메소드, 오버라이드 (2) | 2022.07.05 |
|---|---|
| 08 - 예외 처리 고급 (2) | 2022.07.04 |
| 07 -2 키보드 이벤트로 별 이동하기 (0) | 2022.06.27 |
| 07 -2 자바스크립트 문서 객체 - 이벤트, 이벤트 모델 (0) | 2022.04.12 |
| 06 -3 얕은 복사(참조 복사)와 깊은 복사(... 전개 연산자) (0) | 2021.12.13 |
