로컬Storage에 Form 데이터 자동저장하기

• 폼 데이터 자동저장 jQuery 플러그인 Sisyphus.js
• 레일스 프로젝트용 젬
• Javascript Date format 함수

누구나가 폼 데이터 입력시 긴 글을 작성하다가 저장을 하지 않은 상태에서 브라우저 화면을 refresh한 경우 입력한 데이터가 사라지는 경험이 있을 것이다.

HTML5에서는 브라우저의 LocalStorage에 데이터를 임시로 저장하는 기능이 지원되는데, 이 기능을 이용해서 임시저장하는 jQuery 플러그인이 있어 소개한다. 레일스 프로젝트에서 사용할 수 있는 gem도 있어서 Gemfile에 아래와 같이 추가하고 bundle install 한 후,

gem 'sisyphus-rails' 

application.js 파일에 아래와 같이 추가한다.

... 
//= require sisyphus 
... 

다음은, form 태그에 id를 지정하고 CoffeeScript로 아래와 같이 작성한다.

$ -> 
  $( "#controls_form" ).sisyphus 
    timeout: 10 
    onSave: -> 
      e = $('#autosave_message .autosave-form-status.label-success') 
      e.text (new Date().format("a/p hh시 mm분 ss초")) + ", 로컬DB에 저장됨" 
      e.show().delay(5000).fadeOut('slow') 
      console.log(new Date().format("yyyy년 MM월 dd일 a/p hh시 mm분 ss초")) 
      return 
    onRestore: -> 
      e = $('#autosave_message .autosave-form-status.label-warning') 
      e.text (new Date().format("a/p hh시 mm분 ss초")) + ", 로컬DB로부터 복구됨" 
      e.show().delay(5000).fadeOut('slow') 
      console.log(new Date().format("yyyy년 MM월 dd일 a/p hh시 mm분 ss초"))
      return 
    onRelease: -> 
      e = $('#autosave_message .autosave-form-status.label-error') 
      e.text (new Date().format("a/p hh시 mm분 ss초")) + "에 저장됨" 
      e.show().delay(5000).fadeOut('slow') console.log(new Date().format("yyyy년 MM월 dd일 a/p hh시 mm분 ss초")) 
      return 

현재 날짜를 한글포맷으로 표시하기 위해서 자바스크립트의 Date 클래스에 `.format` 함수를 새로 정의한다. (Javascript Date format 함수)

Date.prototype.format = function(f) {
    if (!this.valueOf()) return " ";

    var weekName = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];
    var d = this;

    return f.replace(/(yyyy|yy|MM|dd|E|hh|mm|ss|a\/p)/gi, function($1) {
        switch ($1) {
            case "yyyy": return d.getFullYear();
            case "yy": return (d.getFullYear() % 1000).zf(2);
            case "MM": return (d.getMonth() + 1).zf(2);
            case "dd": return d.getDate().zf(2);
            case "E": return weekName[d.getDay()];
            case "HH": return d.getHours().zf(2);
            case "hh": return ((h = d.getHours() % 12) ? h : 12).zf(2);
            case "mm": return d.getMinutes().zf(2);
            case "ss": return d.getSeconds().zf(2);
            case "a/p": return d.getHours() < 12 ? "오전" : "오후";
            default: return $1;
        }
    });
};

String.prototype.string = function(len){var s = '', i = 0; while (i++ < len) { s += this; } return s;};
String.prototype.zf = function(len){return "0".string(len - this.length) + this;};
Number.prototype.zf = function(len){return this.toString().zf(len);};

form 태그 안에 메시지를 표시하기 위해서 아래와 같이 추가하고,

<div id='autosave_message'> 
  <span class='label label-success autosave-form-status'>Data persisted</span> 
  <span class='label label-warning autosave-form-status'>Data restored</span> 
  <span class='label label-error autosave-form-status'>Data released</span> 
</div>

관련 CSS를 추가한다.

.autosave-form-status { display:none; }