[ JS : localStorage ] 나의 작고 소중한 데이터베이스

let login = document.querySelector('.login')
let loginBtn = document.querySelector('.login__button')
let loginName = document.querySelector('#login__name')
let alert = document.querySelector('.alert')
let userName = document.querySelector('.name')

loginBtn.addEventListener('click', (event) => {
    event.preventDefault()
    if (loginName.value === "") {
        alert.innerText = '이름을 입력해주세요.'
    } else {
        login.classList.add('hidden')
        userName.innerText = `${loginName.value}`
    }

})

다른 사이트와 같이 로그인을 하게 되면 프로필이 뜨게 만들었다.

하지만 새로고침을 하면 귀찮은 로그인창이 다시 뜨면서 이름이 사라진다..

그래서 충격을 받고 쓰게 된 게

localStorage

localStorage는 웹 브라우저에서 제공하는 JavaScript의 기능이다.

웹에서 클라이언트 측에 데이터를 저장하는 데 사용되는데, localStorage는 사용자의 클라이언트 환경에 데이터를 지속적으로 저장할 수 있다.

 

localStorage는 자바스크립트 객체처럼 key-value가 짝꿍처럼 붙어있다.

 

새로고침을 하거나 심지어 종료가 되어도 데이터는 말짱! 너무 작고 소중한 데이터베이스..

 

localStorage에 사용하는 방법⭐️

// 데이터 저장
localStorage.setItem('key', 'value');

// 데이터 가져오기
var value = localStorage.getItem('key');

// 데이터 삭제
localStorage.removeItem('key');

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

// 데이터의 개수 반환
localStorage.length;

// 인덱스에 해당하는 키를 반환
localStroage.key(index) 

활용 방법은  setItem을 key에 아무거나 쓰고 value에다가 Input.value 같은 친구를 써서 넣어버리고

getItem으로 가져와서 그 값을 내가 원하는 곳에 넣어주면 된다.

 

그런데 이거 어디서 확인할 수 있게요~?

개발자도구 → Aplication → Local Storage 

 

약간의 이론

localStorage는 도메인에 종속되기 때문에 동일한 도메인의 다른 웹 페이지에서도 동일한 localStorage 데이터에 접근할 수 있다. 하지만 보안 상의 이유로 다른 도메인(구글)에서 접근하는 것은 허용되지 않는다.

 

도메인이 정확히 뭔데요?

도메인이란 www.naver.com

인터넷에서 컴퓨터, 네트워크 또는 서비스를 식별하는 주소라고 한다. 예로 www.naver.com에 localStroge를 쓰게 되면 www.naver.com/wetoon에서는 쓸 수 있는데 www.google.com에서는 쓸 수 없다. 초간단~

 

그리고 여기서 꼭 알아야 될 사항은

단순한 텍스트 데이터만 저장할 수 있다.

 

그러면 객체나 배열은 어떻게 함요?

JSON.stringify()를 사용하여 문자열로 변환한 후 저장 후

JSON.parse()를 사용하여 다시 객체나 배열로 변환해야 한다.

 

이렇듯 localStorage는 웹에서 간단한 클라이언트 측 데이터 저장소로 유용하게 사용될 수 있다.

 

 

 

 

 

그렇게 위에 것들을 적용시킨 결과 코드!

let login = document.querySelector('.login')
let loginBtn = document.querySelector('.login__button')
let loginName = document.querySelector('#login__name')
let alert = document.querySelector('.alert')
let nameText = document.querySelector('.name')

loginBtn.addEventListener('click', loginHandler)

function loginHandler(event) {
    event.preventDefault()
    if (loginName.value === "") {
        alert.innerText = '이름을 입력해주세요.'
    } else {
        login.classList.add('hidden')
        let username = loginName.value
        nameText.innerText = `${username} 😆`
        localStorage.setItem("username", username)
    }
}

const savedUsername = localStorage.getItem('username')

// 없으면 그대로 두고 아니면 넣어두고~
if (savedUsername === null) {
    login.classList.remove('hidden')

} else {
    login.classList.add('hidden')
    nameText.innerText = `${savedUsername} 🥰`
}