누구나가 폼 데이터 입력시 긴 글을 작성하다가 저장을 하지 않은 상태에서 브라우저 화면을 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; }