JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<link rel="stylesheet" href="https://yastatic.net/bootstrap/3.3.6/css/bootstrap.min.css">
<input id="in-name" type="text" name="name" placeholder="Ваше имя">
<input id="in-addr" type="text" name="addr" placeholder="Адрес">
<button id="btn-save" class="btn btn-default">Сохранить</button>
<dl id="out"></dl>

JavaScript

/**
 * для вопроса http://ru.stackoverflow.com/questions/539174
 */
var people = []
  ,saved = localStorage.getItem("people")
  ,in_name = document.getElementById('in-name')
  ,in_addr = document.getElementById('in-addr')
;

if( saved) {
  people = JSON.parse(saved);
  render();
}

document.getElementById('btn-save').addEventListener(
  'click',
  function(){
    people.push({
      name: in_name.value,
      addr: in_addr.value
    });
    localStorage.setItem("people", JSON.stringify( people));
    render();
  }
);

function render() {
  var div = document.getElementById('out'), i, html = '', p;
  for( i=0; i<people.length; i++) {
    p = people[i];
    html += '<dt>'+p.name+'</dt><dd>'+p.addr+'</dd>';
  }
  div.innerHTML = html;
}