보통 게시판들이 작성글에 대한 임시저장글을 저장할때 일정시간주기로 서버로 보낸뒤에 저장합니다. 

회원이라면 회원 고유값등으로 인덱싱을 해서 저장을 하겠지요.

근데 이 방법은 서버에 데이터를 보낸다라는 행동이기 때문에 서버부하와 대역부하등을 고려하여 임시저장타임을 좀 길게 잡게 될것이구요.

서버엔 언제 다시 사용될지 모르는 임시저장된 글을 위해 서버공간을 잡아먹고 있어야하죠.

그러다가 문득 떠오른생각인데 최신 html규격에 따라 IE8부터 그리고 현존하는 모든 브라우져(물론 모바일브라우져도 포함)가 지원하는 브라우져의 로컬 스토리지나, 로컬 데이터베이스를 활용하는 방법은 어떨까 생각을 해보았습니다.

어차피 임시저장의 목적은 글을 작성하다가 실수든, 시스템문제든 글을 저장하지 못하고 브라우져가 꺼졌을 때에 대한 대비책으로 활용되는 경우가 많은데

그 사용자의 브라우져에 임시로 작성글을 저장하게 되면, 거의 실시간으로 변경사항을 저장할 수 있습니다. (서버로 데이터를 보내는게 아니라 사용자 브라우져에 저장하는거니까요)

기존에 쿠키 개념과 비슷한데, 쿠키를 이용하지 않았던건 최대저장용량이 4KB로 작기 때문이죠. 게시판당 또는 게시물당 저장을 하기엔 턱없이 부족한 용량입니다.

그런데 로컬스토리지는 표준권고사항을 5MB까지, IE의 경우엔 10MB까지 저장할 수 있으며, 로컬 데이터베이스는 용량제한이 명시적으로 없습니다. 기가단위까지도 저장할 수 있죠.

로컬스토리지와 로컬 데이터베이스를 활용하는 첨부한 파일까지 HTML5의 FileAPI를 이용하여, BLOB 형태로 브라우져에다가 저장해둘 수 있고

사용자가 다시 글쓰기 창을 열었을 때 로컬스토리지 데이터를 이용해 간단하게 복원이 됩니다.

서버는 임시저장용 데이터베이스를 관리하지 않아도 되고, 로컬스토리지는 "영구"저장이기 때문에 명시적으로 해당 데이터를 지워라 신호를 보내기까지 지워지지 않죠. (물론 브라우져에서 제공하는 개인정보삭제 등의 기능을 활용하면 지워지지만, 글 쓰다가 브라우져가 다운되어 다시 들어왔을때 작성하던 데이터가 보이길원하는 사용자가 그 기능을 지울거라곤 생각하지 않습니다.)

<form data-use-autosave="true"> 같은 data attribute하나 정의해두고

$("form[data-use-autosave=true] input, textarea").on("keyup",function() {

// data-use-autosave=true 로 지정된 폼 안의 input과 textarea요소에서 키보드 입력 이벤트가 발생한다면

var form = $(this).parents("form"); // 해당 입력폼이 포함된 폼

​window.localStorage[form.name] = form.serialize(); // 폼 이름을 키값으로 폼 전체 데이터 저장 

});

이렇게 해두면 입력창에서 키보드를 칠때마다, 입력창이 포함된 폼의 전체 데이터를 실시간으로 브라우져 로컬 스토리지에 저장할 수 있습니다. (파일저장은 좀더 고민해보세요! ^^)

그리고 사용자가 다시 돌아왔을 때

$(document).ready(function() {

$("form[data-use-autosave=true]").each(function() { ; // 저장기능을 사용중인 폼을 찾습니다.​

if (window.localStorage[$(this).attr("name")]) { // 해당 폼 이름을 가진 임시저장글이 있는지 검사

var data = JSON.parse(window.localStorage[$(this).attr("name")]​); // 해당 데이터를 해석

for (name in data) {

$(this).find("input[name="+name+"], textarea[name="+name+"]​").val(data[name]);

// 입력폼에 데이터를 다시 복원

}

}

})

});

예제 코드들은 생각만으로 코딩한거라 실제로 동작할지는 잘 모르겠습니다. 제 머리속에서는 동작할 것 같은데 말이죠. ^^

어쨋든 로컬스토리지를 활용하는 방법도 은근 괜찮을 것 같습니다. IE6, IE7은 과감히 버려버리구요.