[JavaScript] localStorage 객체, focus, blur 이벤트

localStorage 객체

localStorage는 웹 브라우저가 기본적으로 제공하는 객체이다.

웹 브라우저에서 제공해주는 기능을 웹 API라고 한다.

이것으로 웹 브라우저에 데이터를 저장할 수 있다.

 

주요 메소드

메소드	설명
localStorage.getItem(키)	지정된 값을 추출한다. 없으면 undefined가 나옴. localStorage.키 형태로 사용 가능.
localStorage.setItem(키, 값)	키로 값을 저장합니다. localStorage.키 = 값 형태로 사용 가능.
localStorage.removeItem(키)	특정 키 값을 제거.
localStorage.clear()	저장된 모든 값을 제거.

 

 

코드

document.addEventListener('DOMContentLoaded', () => {
    const input = document.querySelector('textarea')
    const button = document.querySelector('button')
    const p = document.querySelector('p')

    const savedText = localStorage.getItem('input')
    if(savedText){
        input.value = savedText
        p.textContent = `이전 내용: ${savedText}`
    }

    input.addEventListener('keyup', (event) => {
        const text = event.currentTarget.value
        localStorage.setItem('input', text)
    })

    button.addEventListener('click', (event) => {
        localStorage.clear()
    })
})

 

focus, blur 이벤트

focus, blur 이벤트는 입력 양식에 포커스를 맞춘 경우와 해제한 경우에 발생하는 이벤트이다.

이것을 이용해 입력 양식에 입력한 글자 수를 출력해 보자.

키보드 이벤트(keydown, keypress, keyup)를 이용하지 않는 이유는 아시아권 문자에 문제가 많기 때문이다.

 

 

코드

document.addEventListener('DOMContentLoaded', () => {
    const textarea = document.querySelector('textarea')
    const h1 = document.querySelector('h1')
    let timerId

    textarea.addEventListener('focus', (event) => {
        timerId = setInterval(() => {
            const length = textarea.value.length
            h1.textContent = `글자 수: ${length}`
        })
    }, 50)

    textarea.addEventListener('blur', (event) => {
        clearInterval(timerId)
    })

})

포커스를 맞췄을 때 타이머를 통해 글자의 길이를 세어 출력한다.

포커스를 해제했을 때 타이머ID를 통해 제거한다.