최효성 자바스크립트

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

 

누구나가 폼 데이터 입력시 긴 글을 작성하다가 저장을 하지 않은 상태에서 브라우저 화면을 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` 함수를 새로 정의한다.

$ ->
  Date::format = (f) ->
    if !@valueOf()
      return ' '
    weekName = [
      '일요일'
      '월요일'
      '화요일'
      '수요일'
      '목요일'
      '금요일'
      '토요일'
    ]
    d = this
    f.replace /(yyyy|yy|MM|dd|E|hh|mm|ss|a\/p)/gi, ($1) ->
      switch $1
        when 'yyyy'
          return d.getFullYear()
        when 'yy'
          return (d.getFullYear() % 1000).zf(2)
        when 'MM'
          return (d.getMonth() + 1).zf(2)
        when 'dd'
          return d.getDate().zf(2)
        when 'E'
          return weekName[d.getDay()]
        when 'HH'
          return d.getHours().zf(2)
        when 'hh'
          return (if (h = d.getHours() % 12) then h else 12).zf(2)
        when 'mm'
          return d.getMinutes().zf(2)
        when 'ss'
          return d.getSeconds().zf(2)
        when 'a/p'
          return if d.getHours() < 12 then '오전' else '오후'
        else
          return $1
      return

  String::string = (len) ->
    s = ''
    i = 0
    while i++ < len
      s += this
    s

  String::zf = (len) ->
    '0'.string(len - (@length)) + this

  Number::zf = (len) ->
    @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; }