HTML form 입력값 저장하기

,

동기

웹 개발을하면 HTML form에 입력값을 입력하고 테스트하는 경우가 많다.

입력하고 에러가 나면 디버그하고 다시 입력하고 테스트하는 일의 반복이다.

문제는 입력값이 많을 경우에 하나하나 입력하기가 매우 귀찮으며, 시간을 많이 소비하게된다.

나는 이런 경우에 테스트 스크립트를 만들어서 콘솔에 복사해서 붙여넣는 식으로 개발을 했었는데
테스트 스크립트를 만드는 것 역시 귀찮게 느껴졌다.

귀차니즘귀차니즘

자동으로 저장하고 불러오는 방법이 없을까 고민하였고 왠지 localStorage에 FormData를 저장하고 불러오면 되지 않을까 생각이 들어서 급하게 코드를 작성해보았다.

코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
const getType = element => {
    if(element.type)
        return element.type;
    
    if(element.length > 1) {
        for(child of element) {
            if(child.type) return child.type;
        }

    }
    return undefined;
};

const saveFormData = (formName) => {
    const frm = document[formName];
    if(!frm) {
        throw `[${formName}] form을 찾을 수 없습니다`;
    }
    const frmData = new FormData(frm);
    const serialized = JSON.stringify(Array.from(frmData.entries()));
    localStorage.setItem(formName, serialized);
};

const loadFormData = (formName) => {
    const loadData = localStorage.getItem(formName);
    if(!loadData) {
        alert('등록된 데이터가 없습니다.');
        return;
    }

    const frm = document[formName];
    const formObj = JSON.parse(loadData);
    formObj.forEach(([key, value]) => {
        const element = frm[key];
        const type = getType(element);

        if(type === 'text' || type === 'radio' || type === 'select' || type === 'select-one') {
            element.value = value;
        } else if(type === 'checkbox') {
            document.querySelector(`input[name=${key}][value=${value}]`).checked = true;
        }            
    });
};

const removeFormData = formName => localStorage.removeItem(formName);

간단히 FormData를 serialize한 다음 폼이름으로 localStorage에 저장하고 불러오는 코드다.

사용법은 다음과 같다.

  1. 콘솔창에 위 코드 복사 붙여넣어 실행
  2. saveFormData(‘myForm’); //입력값을 넣은 후 호출하면 저장됨
  3. loadFormData(‘myForm’); //새로고침한 후 호출하면 저장된 값들이 폼에 입력됨
  4. removeFormData(‘myForm’); //저장된 formdata 삭제

일단 text, radio, selectbox, checkbox만 했는데 테스트 결과 잘 작동한다.

크롬 확장프로그램

위 처럼 사용하려면 계속 소스를 콘솔창에 붙여넣어야하는 불편함이 있다.
좀 더 편하게 사용하기 위해 크롬 확장프로그램에 등록하여 사용하는 방법으로 변경하였다.
소스 코드와 사용법은 github에 올려놓았다.

https://github.com/timpac31/formdataSaver