Javascript/jquery) LocalStorage를 활용해서 input에 입력한 값 새로고침해도 유지하기

 

$('#input-form').append("<div class='col-6 mb-3'><label class='form-label' for="예시아이디" >예시 라벨</label> <input class='form-control' type='text' id="예시아이디" onkeyup='saveValue(this);'></div>");
$('#예시아이디').val(getSavedValue('예시아이디'));

 

위 코드는 input-form 이라는 아이디 값을 가진 객체에

 

<div class='col-6 mb-3'>
	<label class='form-label' for="예시아이디" >예시 라벨</label> 
    <input class='form-control' type='text' id="예시아이디" onkeyup='saveValue(this);'>
</div>

 

이런 객체를 추가해주는 코드이다. 

 

여기서 핵심은  onkeyup='saveValue(this);

 

        /* input에 입력된 값 로컬스토리지에 저장하기 */
        function saveValue(e){
            var id = e.id;
            var val = e.value;
            localStorage.setItem(id, val);
        }
        
        /* 로컬스토리지에 저장된 값으로 input 채우기 */ 
        function getSavedValue(v){
            if(!localStorage.getItem(v)){
                // 사용자가 입력하지 않았다면 defualt 값을 반환 
                return v.value;
            }
            return localStorage.getItem(v);
        }

 

input 위에서 키보드를 이용해서 사용자가 값을 입력할 때마다 그 변화를 감지해서 saveValue로 해당 input 객체를 넘깁니다. 

그러면 saveValue라는 함수에서 해당 객체의 id값과 value 값을 키 밸류로 이용해서 로컬스토리지에 저장합니다. 

 

그리고 $('#예시아이디').val(getSavedValue('예시아이디')); 이 코드를 통해 예시아이디의 value를 getSavedValue('예시아이디')로 설정하게 되는데 

getSavedValue에서는 파라미터로 전달받은 예시아이디값을 키로 로컬스토리지에서 getItem을 해서 그 값을 가져와서 $('예시아이디') 객체에 넣어줍니다.