Как сохранить html после ввода текста на страницу

Question

К примеру. у нас есть функция, которая при вводе в отправки печатает содержимое ввода в страницу, всмысле что то похожее на чата, но суть не в этом, как сделать так, чтобы после вывода текста на страницу, html файл сохранился, и после перезагрузки не исчез текст которую мы выводили на экран?

<input type = "text" class = "input">
<button class = "btn">Click</button>

let x = document.querySelector(".input")
let y = document.querySelector(".btn")

document.querySelector(".btn").onclick = function(){

document.write(x.value)
}

Answer 1

Можно использовать локальное хранилище, типа localStorage - https://developer.mozilla.org/ru/docs/Web/API/Window/localStorage

let x = null;
let y = null;
let textDiv = null;

document.querySelector(".btn").onclick = function() {
    let text = x.value;
    
    textDiv.textContent = text;    
    localStorage.setItem('chatText', text);
}

function onDOMContentLoaded() {
    x = document.querySelector(".input");
    y = document.querySelector(".btn");
    textDiv = document.getElementById("text-div");
    
    let text = localStorage.getItem('chatText');
    
    if (text)
        textDiv.textContent = text;
}

document.addEventListener("DOMContentLoaded", onDOMContentLoaded);

<input type = "text" class = "input">
<button class = "btn">Click</button>

<div id="text-div"></div>

Либо сохранять данные в БД или другое хранилище (в файл на сервере)

БЛОГ НА HUSL

Как сохранить html после ввода текста на страницу

Ответы (1 шт):