Как сохранить группировку сообщений в окне чата после обновления страницы с помощью JavaScript

Я реализовал окно чата, в котором сообщения от одного и того же отправителя группируются в контейнере. Группировка отлично работает при последовательной отправке нескольких сообщений, но после обновления страницы каждое сообщение разделяется на отдельные контейнеры. Например, текущий пользователь написал несколько сообщений подряд, они должны добавится в div с классом container, и также с отображением сообщений собеседника, только класс у div - container darker. Короче зайдите на этот сайт https://html5css.ru/howto/howto_css_chat.php и нажмите "просмотр демо в редакторе", найдите любой div и там скопируйте тег p и span и вставьте туда же, вот так должно выходить у меня. html:

{% block content %}
  <div id="chat" class="card">
    <div class="chat-header">{{ companion }}</div>
    <div class="chat-window">
      <div class="chat-messages">
        {% for message in messages %}
          {% if current_user == message.sender.email %}
            <div class="container">
              <img src="{{ user_icon }}" alt="" class="right" style="width:100%;">
              <div class="message-group">
                <p>{{ message.message }}</p>
                <span class="time-left">{{ message.created_at|date:"H:i" }}</span>
              </div>
            </div>
          {% else %}
            <div class="container darker">
              <img src="{{ user_icon }}" alt="" style="width:100%;">
              <div class="message-group">
                <p>{{ message.message }}</p>
                <span class="time-right">{{ message.created_at|date:"H:i" }}</span>
              </div>
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>

    <div class="chat-input">
      <form method="post">
        {% csrf_token %}
        {{ form.message }}
        <button class="send-button">Отправить</button>
      </form>
    </div>
  </div>
{% endblock content %}

JavaScript (работает):

let previousSender = null;
let lastContainer = null;

chatSocket.onmessage = function (event) {
    const data = JSON.parse(event.data);
    const message = data.message;
    const sender = data.sender;
    const currentUser = email;

    const containerClass = sender === currentUser ? 'container' : 'container darker';
    const imageClass = sender === currentUser ? 'right' : '';
    const timeClass = sender === currentUser ? 'time-left' : 'time-right';
    const time = new Date().toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});

    const chatMessages = document.querySelector('.chat-messages');

    if (sender === previousSender && lastContainer) {
        const pElement = document.createElement('p');
        pElement.textContent = message;
        lastContainer.querySelector('.message-group').appendChild(pElement);

        const spanElement = document.createElement('span');
        spanElement.className = timeClass;
        spanElement.textContent = time;
        lastContainer.querySelector('.message-group').appendChild(spanElement);
    } else {
        const containerElement = document.createElement('div');
        containerElement.className = containerClass;

        const imgElement = document.createElement('img');
        imgElement.src = userIcon;
        imgElement.alt = '';
        imgElement.className = imageClass;
        imgElement.style.width = '100%';
        containerElement.appendChild(imgElement);

        const messageGroupElement = document.createElement('div');
        messageGroupElement.className = 'message-group';

        const pElement = document.createElement('p');
        pElement.textContent = message;
        messageGroupElement.appendChild(pElement);

        const spanElement = document.createElement('span');
        spanElement.className = timeClass;
        spanElement.textContent = time;
        messageGroupElement.appendChild(spanElement);

        containerElement.appendChild(messageGroupElement);

        chatMessages.appendChild(containerElement);

        lastContainer = containerElement;
    }

    previousSender = sender;
};