Local Storage 저장하는 방법

사용자의 정보를 로컬 스토리지에 저장해서 써야하는 경우가 생겼다.

쿠키만 사용해보고 로컬 스토리지는 개념으로 밖에 몰랐는데 이번 기회에 사용해봤다.

 

주의 사항, 로컬 스토리지는 자바스크립트로만 생성 가능하다?, C#에서는 안되는 것 같다. (내가 찾은 바로는..)

 

아래는 remember me 구현하는 예시

 

// step 1. 로컬 스토리지 저장 함수 생성

localStorage.setItem('key 이름', 'value 내용');

    // 로컬스토리지 저장
    function saveInfo(Value) {
        localStorage.setItem('사용 할 Key', Value);
    }

 

 

// step 2. 로컬 스토리지 사용하는 함수 생성

    // 로컬스토리지 -> 이메일 필드 사용할 때,
    function fillUserLoginInfo() {
        var savedEmail = localStorage.getItem('userLoginEmail');
        if (savedEmail) {
            document.getElementById('이메일 저장할 곳').value = savedEmail;
            document.getElementById('remember-me').checked = true;
        }
    }

 

 

// step 3. 로컬 스토리지 제거하는 함수

localStorage.removeItem('key이름')

    document.getElementById('account').addEventListener('submit', function (event) {
        const emailInput = document.getElementById('Input_Email');
        const rememberMeCheckbox = document.getElementById('remember-me');
        // 체크 -> 저장
        if (rememberMeCheckbox.checked) {
            saveUserLoginInfo(emailInput.value);
        } else {
            // 체크X -> 제거
            localStorage.removeItem('userLoginEmail');
        }
    });

 

자세한 localStorage 사용 방법,

clear(), getItem(), removeItem(), setItem() 이렇게만 필요할 때 찾아보면 될 것 같다.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage