조금 더 쓸만한 메모장 – 1

sooopd

11년 ago

지난 글에서 간단히 contentEditable 속성을 사용해서 웹 브라우저를 메모장처럼 쓸 수 있도록 하는 팁을 소개한 바 있는데, 임시적인 메모를 하는 수준 이상으로 활용하기는 조금 어려웠다. (물론 Ctrl + S 를 눌러서 편집중이던 내용자체를 HTML로 저장하는 방법이 있기는 하다. )
그래서 아예 입력된 내용을 저장해주는 형태로 이것 저것 기능을 붙여보되, 최대한 간단하게 만들어 보자. 여기에는 HTML5 Storage가 사용되는데 (사실상 아주 초기에만 HTML5의 규격에 포함되어 있었으나, 중간에 이런 저런 이유로 web storage는 별도 규격으로 독립하였다.) 사실 매우 매우 간단하다.
키보드를 입력하는 순간순간마다 텍스트 내용이 저장되고, 파일을 다시 열 때 저장되어 있던 내용을 복구한다. 북마클릿 형태로 작성된 건 아니고 HTML 파일로 만들었다. 디스크 어딘가에 저장해놓고 해당 파일을 북마크 해 두면 그나마 조금 더 쓸모있게 쓸 수 있다. Local Storage가 동작하는 환경은 의외로 많아, IE8이상 및 그외 거의 모든 브라우저에서 사용할 수 있다.
코드는 아래와 같다.

<!DOCTYPE html>
<html>
<head>
<title> storage test </title>
<style>
button {
    background-color: lightGrey;
    border: 1px solid #636363;
    box-shadow: 0 1px 3px whiteSmoke inset;
    text-shadow: 0 1px 0 white, 0 0 4px #EEE;
    border-radius: 3px;
    margin: 0;
}
#menu {
    background-color: #9B9B9B;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 0px 0 white inset, 0 4px 3px #C7C7C7 inset;
    border: 1px solid #646464;
    border-bottom: none;
    height: 25px;
    padding: 2px 4px 0px 4px;
}
#cwt {
    border: 1px solid #646464;
    min-height: 200px;
    padding: 10px;
    box-shadow: 0 0 10px #EEE inset;
    border-radius: 0 0 8px 8px;
    font-size: 10pt;
    line-height: 130%;
    text-shadow: 0 1px 0 white, 0 0px 6px white;
    background-color: #DDD;
}
    </style>
<script>
function getStorage()
{
    if(!window.Storage)
    {
        console.log('NO STORAGE');
        return false;
    }
    return true;
}
var pref = 'ContentOf';
function save(elem_id)
{
    if(getStorage()){
        var elem = document.getElementById(elem_id);
        window.localStorage.setItem(pref+elem_id,document.getElementById(elem_id).innerHTML);
    }
}
function load(elem_id)
{
    if(getStorage()){
        document.getElementById(elem_id).innerHTML = window.localStorage.getItem(pref+elem_id);
    }
    console.log('loaded');
}
function init_eventListners()
{
    load('cwt');
    document.getElementById('cwt').addEventListener('keyup',function(){save('cwt');},false);
    document.getElementById('btn-reset').addEventListener('click', function(){if(window.confirm('Really?')){document.getElementById('cwt').innerHTML=''; save('cwt');}},false);
}
document.body.addEventListener('load', init_eventListners, false);
</script>
</head>
<body onload="init_eventListners();">
    <div id="wrapper">
        <nav id="menu">
            <button id="btn-reset">RESET</button>
        </nav>
        <div id="cwt" contentEditable="true";">
        &lt;
        </div>
    </div>
</body>
</html>

메모장은 여기서 확인해 볼 수 있다. 내용을 입력한 후 새로고침하거나 창을 닫았다 다시 접속해도 원래 내용이 유지되고 있음을 확인할 수 있다.

Share this: