How to store output in localStorage?

Question

I'm working on my first ever JavaScript project (a palindrome checker) and I'm kind of getting stuck. I've learned about localStorage() but I can't seem to implement it in my own project. It'd be awesome if someone could point me in the right direction, or write pseudo code as to what I should do to get it to work. I really want to solve it myself, but a little help is much needed here. Thanks :). My JavaScript code (and HTML and CSS for reference:

Edit: I want to show the results (each on a separate line) on the screen using localStorage() and use it again to enable the user to delete the results when clicking on the button.

const checkBtn = document.getElementById("check-word");
const clearBtn = document.getElementById("clear-history");
const outputField = document.getElementById("word-checked");
let array = [];

checkBtn.addEventListener("click", () => {
    const str = document.getElementById("input").value;
    array = [...array, str];
    
    console.log(array);
    palindrome(str);
    renderResult();
    
    function palindrome(str) {
        const lettersOnly = str.toLowerCase().match(/[a-z0-9]/g);
        return lettersOnly.join("") === lettersOnly.reverse().join("");
    }
    
    renderResult();
    
    function renderResult() {
        if (palindrome(str) === true) {
            outputMessage = `︎✔︎ '${str}' is a palindrome!`
        } else {
            outputMessage = ` '${str}' is not a palindrome!`
        }
        outputField.textContent = outputMessage;
    }
    
    document.getElementById("input").value = ""; // clear input field after clicking on checkBtn
})

// clearBtn.addEventListener("click", () => {
//     localStorage.clear();
//     array = [];
//     // render again!
// })

* {
    background-color: #121212;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

h1 {
    font-family: "VT323", monospace;
    font-size: 5rem;
    color: #CE1212;
    text-align: center;
    margin-top: 50px;
}

.container {
    font-family: "Nanum Gothic Coding", monospace;
    color: white;
    width: 75%;
    height: 62.5vh;
    margin: 25px auto 25px auto;

    /* border: 2.5px solid; */
    border-color: white;
    padding: 15px;
}

.input {
    margin-left: 25px;
}

.input-field {
    margin-left: 25px;
    margin-top: 12.5px;
    padding: 7.5px;
    font-family: "Nanum Gothic Coding", monospace;
    color: white;
    border: 1px solid;
}

.input-field:focus::placeholder {
    color: transparent;
}

.check-word, .clear-history {
    padding: 7.5px;
    font-family: "Nanum Gothic Coding", monospace;
    color: white;
    border: 1px solid;
    border-color: white;
    cursor: pointer;
}

.check-word:hover, .clear-history:hover {
    color: #CE1212;
}

.child-1 {
    margin-top: 50px;
    margin-left: 25px;
    /* border: 1px solid; */
    padding: 15px;
}

#word-checked {
    margin-top: 15px;
}

.footer {
    font-family: "Nanum Gothic coding", monospace;
    color: white;
    text-align: center;
    margin-bottom: 25px;
}

a:link, a:visited {
    color: white;
    text-decoration: none;
}

a:hover, a:active {
    color: #CE1212;
    text-decoration: underline;
}








/* 
top, right, bottom, left
*/

<!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>Palindrome Checker</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&family=VT323&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <main>
        <h1> Palindrome Checker </h1>
        <div class="container">
            <label for="input" class="input">Type a word or phrase</label>
            <br>
            <input type="text" name="input" class="input-field" id="input" placeholder="Type something...">
            <button type="button" class="check-word" id="check-word">Check word</button>

            <button type="button" class="clear-history" id="clear-history">Clear history</button>

            <div class="child-1">
                <p id="word-checked">Results will be shown here!</p>
            </div>
        </div>
    </main>
    
    <footer class="footer">
        <p>Built by <a href="https://github.com/YinChuRijnaard" target="_blank">Yin Chu</a></p>
    </footer>

    <script src="index.js"></script>

</body>
</html>

What exactly do you want to achieve? You may use localStorage.setItem('data', strData) where strData is value in string to save and data is the key against which you store it. You may refer to the documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage — Pavan J, Jan 16 '22 at 10:22
You have very good documentation at https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage — Breezer, Jan 16 '22 at 10:22
I just edited my post to include what I'd like to achieve, sorry! — Yin Chu, Jan 16 '22 at 10:24
Does this answer your question? [Save data to local storage](https://stackoverflow.com/questions/23743862/save-data-to-local-storage) — mo3n, Jan 16 '22 at 10:36
@mo3n, it kind of does? The problem is not so much that I have no clue at all as to what I'm doing. It's more like, I have difficulty implementing it in my own code and putting it in the right place. That is, I don't know where I have to put the code in order to have it work :') — Yin Chu, Jan 16 '22 at 10:39

mswgen · Accepted Answer · 2022-01-16T10:32:16.060

1

It's really easy. (At least much easier than cookies)

localStorage.setItem('key', 'value'); // to store data
var myData = localStorage.getItem('key') // to get data
localStorage.removeItem('key') // to remove one data
localStorage.clear() // to remove all data

Replace key and value with the data key and the data to store respectively.

edited Jan 16 '22 at 10:32

answered Jan 16 '22 at 10:24

mswgen

636
1
9
18

Thanks for your reply. It's helpful. However, like I mentioned above, I simply don't know where I have to put the code in order to make it actually work. That's what I'm struggling with :') – Yin Chu Jan 16 '22 at 11:16
@YinChu Just put it inside the `click` event listener of buttons. But... where do you want to show local storage data? – mswgen Jan 16 '22 at 11:19
I want to show the output on the screen. Like, you click a button and the output is shown on the screen. But when you click on the button again the previous output is replaced with the new one. (And thanks for your help!) – Yin Chu Jan 16 '22 at 11:28
@YinChu what is the 'output'? Is it a data from local storage? – mswgen Jan 16 '22 at 11:33
See: https://imgur.com/a/KlFjLA8. 'teset' is correctly displaying as a palindrome, but when I type another entry the current entry is replaced. I actually want the new entry to display underneath the current entry. Sorry for being so unclear about my question! – Yin Chu Jan 16 '22 at 11:37
@YinChu no problem. 1. The `outputField.textContent = outputMessage` should be `outputField.textContent += \`${outputMessage}
\'` 2. Remove one of the two `renderResult()` calls. 3. Put `localStorage.setItem('history', outputField.textContent)` right after `renderResult()` call. 4.put `outputField.textContent = localStorage.getItem('history')` at the top kevel(outside the `click` event listener). – mswgen Jan 16 '22 at 11:50
Thanks so much, I believe this will fix it. However, one last thing and I'll stop bothering you. I get this error: https://imgur.com/a/LWXc4EB. I did what you suggested but for I've made a mistake somewhere but idk where or what – Yin Chu Jan 16 '22 at 12:03
@YinChu remove \ from the line where the error occurred. – mswgen Jan 16 '22 at 12:04
But your suggestion was ...`${outputMessage}
\'? :) – Yin Chu Jan 16 '22 at 12:08
@YinChu it was a mistake with markdown format. ...\`${outputMessage}
\` is right. (also notice that it's \` not ') – mswgen Jan 16 '22 at 12:10
it for some reason doesnt work still because it literally shows
on the screen instead of bringing it to a new line – Yin Chu Jan 16 '22 at 12:26
@YinChu replacing all `textContent` with `innerHTML` would solve this. – mswgen Jan 16 '22 at 13:40

How to store output in localStorage?

1 Answers1