JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="listLoad();">
    <div id="header">
         <h1>Работаем с локальным хранилищем</h1>

    </div>
    <div id="notes">
         <h3> Список записей</h3>

        <ol id="notelist"></ol>
    </div>
    <div id="note">
        <form id="formnote">
            <fieldset>
                <table>
                    <tr>
                        <td>
                            <label class="notefield">Наименование</label>
                        </td>
                        <td colspan=2>
                            <input id="notename" type="text" class="notefield">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label class="notefield">Текст записи</label>
                        </td>
                        <td colspan=2>
                            <textarea id="notecontent" rows=10></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td class="notebtn">
                            <button id="save" type="submit" onclick="saveNote();">Сохранить</button>
                        </td>
                        <td class="notebtn">
                            <button id="delete" type="submit" onclick="deleteNote();">Удалить</button>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </div>
    <div id="footer">
        <p class="footertext">2013 г.</p>
    </div>
</body>

CSS

body {
    background-color:#F7F7F7;
}
#notes {
    float:left;
    width:250px;
}
#note {
    float:left;
    margin-left:20px;
}
#footer {
    clear:left;
    text-align:center;
    font-style:italic;
}
#formnote {
    margin-top: 30px;
}
.notebtn {
    text-align:center;
}
#notecontent, #notename {
    width:450px;
}
.notebtn {
    text-align:center;
}
td {
    vertical-align:top;
}
h1, h3 {
    font-style:italic;
    text-align:center;
}
fieldset {
    border:1px dashed #CCC;
    padding:10px;
}
label {
    width:142px;
    height:32px;
    background-color:#CCCCCC;
    float:left;
    display: block;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 100%;
    letter-spacing: -1px;
    font-weight: normal;
    line-height: 1.1;
    color:#666;
}
.notefield {
    margin-top:3px;
    margin-right:2px;
    padding-top:11px;
    padding-left:6px;
    height:32px;
}
a:link, a:visited {
    color:#666;
    font-style:italic;
    font-weight:500;
    text-decoration:none;
    font-family:Arial, Helvetica, sans-serif;
}
a:hover, li:hover {
    color:#666;
    font-style:italic;
    font-weight:bolder;
    cursor: pointer;
}

JavaScript

function saveNote() {
    var name = document.getElementById('notename').value;
    var content = document.getElementById('notecontent').value;
    alert(content);
    if (content == '') {
        alert('Введите валидный текст!');
    } else {
        if (name == 0) {
            alert('enter valid note name');
        } else {
            localStorage[name] = content;
        }        
    }
    return;
}

function listLoad() {
    var list = document.getElementById('notelist');
    for (var i in localStorage) {
        var a = document.createElement('a');
        a.setAttribute('onclick', "loadNote('" + i + "'); return false;");
        a.innerText = i;
        var element = document.createElement('li');
        element.appendChild(a);
        list.appendChild(element);
    }
}

function loadNote(v) {
    document.getElementById('notecontent').value = localStorage[v];
    document.getElementById('notename').value = v;
}

function deleteNote() {
    var name = document.getElementById('notename').value;
    if (name != '') {
        localStorage.removeItem(name);
    } else {
        alert('note not found');
    }
}