WebSQL

<input id="x" onchange="f(event)">
<div id="list"></div>
<script>
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction( tx => {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
} )
function f( event ) {
    db.transaction( tx => {
        tx.executeSql(`
            INSERT INTO LOGS
                (id, log)
            VALUES
                ('${ new Date() }', '${ event.target.value }' )
        `)
        event.target.value = ''
    } )
    getall()
}
function getall() {
    db.transaction( tx => {
        tx.executeSql(`DELETE FROM LOGS WHERE log=''`)
    } )
    db.transaction( tx => {
        tx.executeSql(`SELECT * FROM LOGS`, [], (tx, res) => {
            document.getElementById('list').innerHTML = `<table>${
                Object.values(res.rows)
                      .map( v =>
                        `<tr>
                            <td>${v.log}</td>
                            <td><button onclick="del('${v.log}')">del</button></td>
                        </tr>`)
                      .join(``)
            }</table>`
        } )
    } )
}
function del(s) {
    db.transaction( tx => {
        tx.executeSql(`DELETE FROM LOGS WHERE log='${s}'`, [], getall )
    } )
}
getall()
</script>