Для того чтобы обновить содержимое переменной и отобразить его на странице с учетом новых значений из локального хранилища без необходимости полностью дублировать код, можно использовать функцию. Создайте функцию, которая будет генерировать HTML-структуру с актуальным значением из локального хранилища и присваивать этот HTML элементу на странице.
Вот пример того, как можно реализовать такую функцию:
function updateProfile() {
var username = localStorage.getItem("username") || 'Неизвестный пользователь';
var block_profile = `
<div class="main-block" id="block_profile">
<div class="div-block-50">
<h2 class="h2">${username}</h2>
<div class="div-block-51"><a href="#" class="tags cab exit w-button">Выйти везде</a><a href="#" class="tags cab exit w-button">Выйти </a></div>
</div>
</div>
`;
// Предполагая, что у вас есть элемент с id="app" на странице
document.getElementById('app').innerHTML = block_profile;
}
// Вызовите эту функцию для инициализации при загрузке страницы
updateProfile();
// И также можете вызвать эту функцию каждый раз, когда нужно обновить информацию на странице
// Например, после изменения значения в localStorage
localStorage.setItem("username", "Новое Имя"); // Пример изменения значения
updateProfile(); // Обновляем содержимое на странице
Этот подход позволяет избежать дублирования кода и обеспечивает более чистую и управляемую структуру кода. Вместо того чтобы вручную искать и изменять конкретные элементы на странице, вы просто пересоздаете необходимый блок полностью с актуальными данными, что часто бывает быстрее и проще для понимания.
