+ 1
Save elements in an array using localStorage
https://sololearn.com/compiler-playground/W9cgBkR3Dp52/?ref=app In this code that I am making I just finished posting the comments to the page but I donât know how to save the comments with local storage or (if possible) using some kind of serverless backend
15 RĂ©ponses
+ 1
Should Work
<!DOCTYPE html>
<html>
<head>
<title>Comment demo</title>
</head>
<body>
<div class="container">
<div class="header">
<h2>Comment Demo</h2>
</div>
<h4>Enter some text below to make a comment</h4>
<textarea id="commentInput"></textarea><br>
<button id="addCommentBtn">Enter</button>
<div class="comments" id="commentsContainer">
<!-- Comments will be displayed here -->
</div>
<script>
// Initialize an empty array to store comments
let comments = [];
// Function to add a new comment
function addComment() {
const commentInput = document.getElementById("commentInput");
const commentText = commentInput.value;
if (commentText.trim() !== "") {
comments.push(commentText);
// Save the updated comments array to localStorage
localStorage.setItem("comments", JSON.stringify(comments));
// Update the comments on the page
displayComments();
// Clear the input field
commentInput.value =
+ 2
I cant Open it could you sent the Code into this discussion?
+ 1
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Comment demo</title>
</head>
<body>
<div class="container">
<div class="header">
<h2>Comment Demo</h2>
</div>
<h4>Enter some text below to make a comment</h4>
<textarea></textarea><br>
<button>Enter</button>
<div class="comments">
comments here:
</div>
<script>
let text = document.querySelector("textarea");
let btn = document.querySelector("button");
btn.addEventListener("click", function(){
let newCom = document.createElement('div');
newCom.id = "comment";
let newComData = document.createTextNode(text.value);
newCom.appendChild(newComData);
document.querySelector(".comments").appendChild(newCom);
text.value = "";
});
</script>
</div>
</body>
</html>
+ 1
I try
+ 1
No wait
+ 1
I could sent all
+ 1
// Clear the input field
commentInput.value = "";
}
}
// Function to display comments on the page
function displayComments() {
const commentsContainer = document.getElementById("commentsContainer");
commentsContainer.innerHTML = "";
// Retrieve comments from localStorage
const storedComments = JSON.parse(localStorage.getItem("comments")) || [];
// Loop through the comments and display them
storedComments.forEach((comment, index) => {
const commentElement = document.createElement("div");
commentElement.textContent = `${index + 1}: ${comment}`;
commentsContainer.appendChild(commentElement);
});
}
// Call displayComments when the page loads to display existing comments
displayComments();
// Add an event listener to the "Enter" button
const addCommentBtn = document.getElementById("addCommentBtn");
addCommentBtn.addEventListener("click", addComment);
</script>
</div>
</body>
</html>
+ 1
Thats all
+ 1
K Ill try it
+ 1
Idk If it Works i am Not very good at web development
+ 1
Np
0
GamerGeil Hd Sure thing
0
Like this?
let comments = JSON.parse(localStorage.getItem('comments')) || [];
// Function to add a new comment to the array and update localStorage.
function addComment(comment) {
comments.push(comment);
localStorage.setItem('comments', JSON.stringify(comments));
}
// Example of adding a new comment.
const newComment = "This is a new comment!";
addComment(newComment);
// To retrieve comments:
const retrievedComments = JSON.parse(localStorage.getItem('comments'));
console.log(retrievedComments); // This will log all the saved comments.
0
Here is my CSS:
*{
padding: 0px;
margin: 0px;
}
body, .container, .comments {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
button{
color: black;
border-style: none;
padding: 5px;
font-size: 100%;
}
.comments{
background-color: lightgray;
width: auto;
height: fit-content;
margin-top: 30px;
border: solid 1px black;
}
#comment{
border-bottom: 1px solid black;
font-size: 120%;
}
0
GamerGeil Hd That worked, Thank you!
Vous avez souvent des questions comme celle-ci ?
Apprenez de maniĂšre plus efficace, gratuitement :
Aujourd'hui en vedette
Control Flow
2 Votes
Animations
2 Votes
How to use the get() method
2 Votes
Game Dev Path
1 Votes
So this what I'm trying to solve
2 Votes
How to get account back?
1 Votes
PHP Tutorial Idea
1 Votes
Problem whit Javascript
1 Votes