localStorage()를 활용한 jqGrid 데이터 임시저장/불러오기

갈릭마늘빵·2023년 4월 29일

JavaScript jqgrid jquery js localstorage 임시저장

최근 운영중인 레거시 시스템에 대한 개선 요청이 많이 오고 있다. 대부분은 기존 코드를 수정하는 선에서 끝나지만 간혹 사용자를 위해 새롭게 개발해야하는 일도 있다.

1. 개선 요청 사항

"그리드 뷰에 입력한 데이터를 임시저장하고 불러올 수 없나요?
그리고 임시저장된 데이터는 개별적으로 관리 할 수 있으면 좋겠습니다. 현재는 그런 기능이 없어보이네요...

프로젝트를 열어 소스코드를 확인해보니 자바스크립트 jqGrid로 만든 그리드 뷰였다.

1-1. jqGrid

데이터 그리드를 생성하기 위한 JavaScript 라이브러리다.
다양한 기능을 제공하며,옵션 커스터마이징으로 사용자가 데이터를 정렬, 검색, 편집할 수 있다

1-2. jqGrid엔 임시저장/불러오기 내장기능이 없나?

가장 빠르고 쉬운 방법은 내장 기능으로 요구 사항을 처리하는 것이지만 관련 글은 찾아볼 수 없었다. (ajax를 활용한 자동저장 예제는 있었다) 사용자가 입력 중이던 input value를 저장할 수 있는 내장기능이 없다고 단정짓기엔 구글링 시간이 짧았지만 다른 구현방안이 생각나 방향을 바꾸기로 했다.

2. localStorage를 활용한 임시저장/불러오기

localStorage()는 브라우저에 데이터를 로컬에 저장할 수 있는 window 내장 객체이다.

2-1. 제공되는 함수

localStorage.setItem(key, value); //key-value 형태의 데이터를 저장 
//key는 문자열, value는 객체나 문자열 등 다양한 형태의 데이터를 저장할 수 있음

localStorage.getItem(key); //지정한 key에 해당하는 데이터를 가져옴
//key가 존재하지 않으면 null을 반환

localStorage.removeItem(key); //지정한 key에 해당하는 데이터를 삭제

localStorage.clear(); //저장된 모든 데이터를 삭제

이 기능을 사용하여 임시저장/불러오기를 구현하려는 이유는 다음과 같다.

2-2. 사용이유

Key, Value 구조로 문의 요청사항대로 데이터 개별 관리가 가능
DB서버와의 통신이 필요없어 BE 쪽 개발이 필요없고 서버에서 데이터를 가져오는 것 보다 처리가 빠름
sessionStorage()와 달리 브라우저 창이 꺼져도 데이터 유지가 가능

3. 구현 예시

VanillaJS로 구현한 예제

코드 간략설명

임시저장

jq("#save-data").click(function () {
  // jqGrid의 각 행에서 ID와 input 태그에 입력된 값을 가져옴
  var data = [];
  var rows = jq("#gridListView").jqGrid("getDataIDs"); // 모든 행의 ID 배열
  for (var i = 0; i < rows.length; i++) {
    var id = rows[i]; // 행의 ID
    ...
    data.push([id, name, stock, ship]);
  }

  var key = getKey();
  localStorage.setItem(key, JSON.stringify(data)); // localStorage에 데이터 저장

  // 실시간으로 데이터를 추가
  ...
  jq(list).insertBefore("#clear-all");
});

save-data 버튼이 클릭될 때 현재 jqGrid의 값을 localStorage에 저장한다. 각 행의 ID와 input 태그에 입력된 값을 가져와서 data 배열에 push 후 localStorage.setItem으로 해당 key에 데이터를 JSON.stringify()로 변환하여 저장한다.

또한, key 값을 이용하여 실시간으로 데이터를 추가하는 역할도 수행한다. list 변수에 key 값을 포함한 HTML 코드를 저장하고, jq(list).insertBefore("#clear-all")를 통해 clear-all 버튼 위에 해당 HTML 코드를 삽입한다.

불러오기 (임시저장데이터 리스트 포함)

jq("#load-data").click(function () {
  // localStorage에 저장된 데이터를 리스트로 보여줌
  var keys = Object.keys(localStorage)
    .filter((e) => e.length === 14)
    .sort(); // 저장된 key 값들을 오름차순으로 정렬
  var list = '';
  ...//임시저장 개별 데이터 for문으로 추가
  jq("#data-list").html(list);

  // 리스트를 클릭하면 해당 데이터를 불러옴
  jq("#data-list li").click(function () {
    var key = jq(this).data("key"); // 클릭한 리스트의 key 값
    var data = JSON.parse(localStorage.getItem(key)); // localStorage에서 데이터 불러오기
    jq("#gridListView").jqGrid("clearGridData"); 
    ...//jqGrid의 데이터 초기화 및 편집모드 설정
    }
  });
});