Javascript-форум - Отображение содержимого input

Итак, доброго времени суток! Назрело пару вопросов по моему коду. Ну, для начала сам код:

<html>
<head>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
  const inp = document.getElementById('message'),
        div = document.getElementById('messagebox'),
        btn = document.getElementById('send');
  btn.addEventListener('click', function () {
    if (inp.value.length)
      div.innerHTML += '<span class="newmessage">' + inp.value + '</span><br><br>'; 
  });
});
</script>
<style>
.newmessage {
width: 70vw;
max-height: 500px;
overflow: auto;
border: 2px solid black;
border-radius: 10px 10px 10px 10px / 5px 5px 5px 5px;
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<input type="text" id="name" placeholder="Ваше имя"><input type="button" id="letname" value="Сохранить имя">
<hr>
    <input id="send" type="reset" value="Отправить">
    <textarea id="message"></textarea>
    <div id="messagebox"></div>
</body>
</html>

Код выводит тот текст, который юзер ввёл в #message. Но... Я не знаю как правильно сохранить .newmessage. localStorage? Да, его можно использовать, но как? Для каждого отдельного сообщения делать новую переменную? А если сообщений будет миллион :blink: ? Обернуть каждый .newmessage? Тогда как?
Еще проблема: если в сообщении есть перевод на новую строчку, то в .newmessage эти переводы отображаюся всего лишь как пробелы. Есть возможность отобразить сообщение "как есть"?
Ах да, ещё забыл сказать. Как можно сохранить значение #name, и потом в каждом .newmessage выводить сохранённый текст?