Как создать на js контейнер, в котором будут сохраняться какие-то данные, например имена?

Рейтинг: 0Ответов: 1Опубликовано: 04.03.2023

localStorage и куки мне не подходят, потому что они запоминают и позволяют работать с введенными данными с предыдущих сеансов, а у меня нет в этом нужды, мне необходимо просто в каком-то контейнере сохранять введенные в нынешнем сеансе данные (имена)

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Version1</title>

    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="messages_container" style="border: 2px solid"></div>
    
    <h1>Введите Ваше имя:</h1>
    <div id="YrName">
        <input type="text" name="name_input">
    </div>
    <div id="SendNameButton"><input type="button" name="send_name_button" value="Enter"></div>

    <div id="inhere">
        <input type="text" name="message_input">       
    </div>

    <div id="SendButton"><input type="button" name="send_message_button" value="Send message"></div>    

    <script type="application/javascript" src = "websocket_client.js"></script>

</body>
</html>

JS:

document.addEventListener('DOMContentLoaded', function(){

    const messagesContainer = document.querySelector("#messages_container");
    const messageInput = document.querySelector('[name=message_input]');
    const sendMessageButton = document.querySelector('[name=send_message_button]');
    const name_input = document.querySelector('[name=name_input]');
    const SendNameButton = document.querySelector('[name=send_name_button]');    

    let websocketClient = new WebSocket("ws://localhost:12345");

    websocketClient.onopen = () => {
        console.log("Client conntected!");
        websocketClient.send("Hello!");
    
        sendMessageButton.onclick = () => {
            websocketClient.send(messageInput.value);
            messageInput.value = "";
        };    

        /*SendNameButton.onclick = () => {
            websocketClient.send(name_input.value);   
            name_input.value = "";
        }; Это отправка из поля ввода имени в тот самый контейнер сбора и сохранения*/

    };

    websocketClient.onmessage = (message) => {
        const newMessage = document.createElement('div');
        newMessage.innerHTML = message.data;
        messagesContainer.appendChild(newMessage);
        console.log(message.data);
    }

    document.onkeydown = (e) => {
        if(e.key === 'Enter') {
            websocketClient.send(messageInput.value);
        }
    }
javascript
Источник: Stack Overflow на русском

Ответы

▲ 0

Я вот накидал, но, ожидаемо выдает ошибку "Uncaught TypeError TypeError: getName.send is not a function". Как мне написать функцию, которая бы решила эту ошибку?

const getName = localStorage.getItem('name_input', JSON.stringify(name_input));
console.log(getName);

SendNameButton.onclick = () => {
    getName.send(name_input.value);
    name_input.value = "";
};