Edit in JSFiddle

<div>
    <h2>
        localStoragePad <button>Click to clear</button>
    </h2>
    <textarea id="local-storage-pad"></textarea>
</div>
<div>
    <h2>
        sessionStoragePad
    </h2>
    <textarea id="session-storage-pad"></textarea>
</div>

* {
    font-family: sans-serif;
    font-weight: bold;
}

html,
body,
div {
    margin: 0;
    padding: 0;
    height: 100%;
}
div {
    float: right;
    width: 50%;
}
div:first-child {
    float: left;
}
h2 {
    margin: 0;
    padding: 1% 0 0 1%;
    height: 10%;
    font-size: 1em;
}
textarea {
    padding: 1%;
    width: 95%;
    height: 85%;
}

function lsPad() {
    localStorage.setItem('lspad', elLSPad.value);
}
function lsPadClear() {
    elLSPad.value = '';
    localStorage.removeItem('lspad');
}
function ssPad() {
    sessionStorage.setItem('sspad', elSSPad.value);
}

var elLSPad = document.getElementById('local-storage-pad'),
    elLSPadClear = document.querySelector('button'),
    elSSPad = document.getElementById('session-storage-pad');

if(window.addEventListener) {
    elLSPad.addEventListener('keyup', lsPad);
    elLSPadClear.addEventListener('click', lsPadClear);
    elSSPad.addEventListener('keyup', ssPad);
} else {
    elLSPad.attachEvent('onkeyup', lsPad);
    elLSPadClear.attachEvent('onclick', lsPadClear);
    elSSPad.attachEvent('onkeyup', ssPad);
}

elLSPad.value = localStorage.getItem('lspad') || '';
elSSPad.value = sessionStorage.getItem('sspad') || '';