웹페이지에 글을 작성하면서 실수로 닫거나 저장이 안되는 경우를 생각해볼 수 있죠. 이런 경우는 누구나 한번쯤 경험해보셨을 겁니다.
웹이즈프리의 글 작성은 간단한 cms에서 작성되는데 자동으로 저장되는 기능이 필요하겠다..라는 생각만 가지고 온지 꽤 되었습니다ㅠ



그래서! 이번에는 작성중인 글이 일정 시간으로 후에 자동으로 저장되는 기능을 만들어보려합니다. 이 기능은 서버를 이용할 수 있겠지만 html5의 localStorage를 활용해보려합니다. 여기서 원하는 기능을 요약해보면!!

  • 일정시간을 설정할 수 있을 것(예제는 60초)
  • 로컬(사용자 pc)에 자동으로 저장되며 최근의 버전 세개까지 저장
  • 만약 기존과 동일한 경우 저장하지 않음
  • 지원되지 않는 브라우저를 고려

위 기능은 필수적으로 고려할 내용입니다. 그럼 아래 예제를 봐주세요!


# 자바스크립트로 글 작성시 자동으로 저장되는 기능

먼저 아래는 html과 css입니다. 간단한 입력폼으로 일정시간이 지나면 저장될 것입니다.

! html code입력하면 받기위해서 textarea 태그를 사용하였습니다.
<textarea id="test"></textarea>

! css code
textarea { width: 200px; height: 100px; }

그럼 아래는 글을 작성하면서 정해진 시간마다 반복해서 글을 저장할 스크립트 코드입니다.

! Javascript code
(function () {
  var autoSave = new Object();
  (function (obj) {
    obj.configuration = {
      interval: 60 // second(s)
    };
    obj.bindTimer = function() {
      var textEle = document.querySelector('#test');
      var textVal = textEle.value;
      var ref1, ref2, ref3; // Newer -> Older

      // Save to localStorage
      var encodedTextVal = btoa(textVal);
      ref1 = window.localStorage.getItem('textval-01');
      ref2 = window.localStorage.getItem('textval-02');

      if ((window.localStorage) && (encodedTextVal != ref1)){
        window.localStorage.setItem('textval-01', encodedTextVal);
        window.localStorage.setItem('textval-02', ref1);
        window.localStorage.setItem('textval-03', ref2);
      }
      else if (!window.localStorage) {
        console.log('Error' + ': Your browser not support')
        return false;
      }
    };

    obj.start = function() {
      obj.bindTimer();
      setTimeout(function() {
        obj.start();
      }, obj.configuration.interval * 1000);
    };
    obj.start();
  })(autoSave);
})();
맨 위에 configuration은 저장될 시간을 초단위로 설정합니다. 또한 텍스트가 저장할때 인코딩합니다. 여기서는 base64 인코딩 방식을 사용하였습니다.

btoa() // 인코딩 base64 방식으로 수행

이제 코드가 완성되었습니다. 꼭 필요한 기능이 아닐까 생각됩니다.

! 생각해볼 부분모든 글이 저장되므로 보안에 필요한 부분은 저장되지 않는 것이 좋을 것입니다. 이 경우를 생각하면 sessionStorage를 사용하는 것이 보안에 유리해보입니다.