Javascriptで掲示板の投稿をローカルストレージに保存 #JavaScript

ブラウザをロードしても投稿したメッセージが残るようにするには、投稿されたメッセージをブラウザのローカルストレージに保存する必要があります。以下は、JavaScriptを使用して掲示板を作成し、投稿されたメッセージをブラウザのローカルストレージに保存するサンプルコードです。
HTMLファイルのコード：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>掲示板</title>
</head>
<body>
    <h1>掲示板</h1>
    <form>
        <label for="name">名前：</label>
        <input type="text" id="name">
        <br>
        <label for="message">メッセージ：</label>
        <textarea id="message"></textarea>
        <br>
        <button type="button" onclick="addMessage()">投稿</button>
    </form>
    <ul id="messageList"></ul>
    <script src="script.js"></script>
</body>
</html>


let messageList = document.getElementById("messageList");
let messages = JSON.parse(localStorage.getItem("messages")) || [];

function addMessage() {
    let nameInput = document.getElementById("name");
    let messageInput = document.getElementById("message");
    let name = nameInput.value;
    let message = messageInput.value;
    let newMessage = document.createElement("li");
    let messageText = document.createTextNode(name + ": " + message);
    newMessage.appendChild(messageText);
    messageList.appendChild(newMessage);
    messages.push({name: name, message: message});
    localStorage.setItem("messages", JSON.stringify(messages));
    nameInput.value = "";
    messageInput.value = "";
}

for (let i = 0; i < messages.length; i++) {
    let newMessage = document.createElement("li");
    let messageText = document.createTextNode(messages[i].name + ": " + messages[i].message);
    newMessage.appendChild(messageText);
    messageList.appendChild(newMessage);
}

上記のコードでは、messagesという名前の配列変数を定義し、ローカルストレージからこの配列を取得します。JSON.parse()関数を使用して、ローカルストレージから取得したデータをJavaScriptオブジェクトに変換します。もしローカルストレージに保存されたデータがない場合は、空の配列を使用します。

addMessage()関数では、投稿されたメッセージを配列に追加し、localStorage.setItem()関数を使用して、ローカルストレージに配列を保存します。また、配列に追加したメッセージを一覧に表示します。

最後に、forループを使用して、ローカルストレージに保存されたメッセージを一覧に表示します。