How can I save notes with localstorage and JSON?

JavaScript
1

I created a page where I can create a note with a title, description and the background color. I can also delete the note. The next and final step that I want to do is that when I return to the page that the notes have been saved and are still visible from the last time. I want to do this with JSON and localstorage . I have already tried a number of things as you can see in the comments from my Javascript but I don’t succeed. I have to admit that I’m a beginner in localstorage. I’ve been stuck with this for almost a week. I hope someone can help me and have a solution. Thanks in advance!

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Notities</title>
        <link href="style.css" media="screen,projection" rel="stylesheet" type="text/css"/>
        <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    </head>
    <body>
    <h1 class="center-align">Notities</h1>
    <div class="container">
        <div class="row">
    <form>
        <div>
        <select class="inputfield col s12 m6" id="notitiekleur">
        <option value="" disabled selected>Selecteer uw kleur</option>
        <option value="rood">Rood</option>
        <option value="groen">Groen</option>
        <option value="blauw">Blauw</option>
        <option value="geel">Geel</option>
        </select>
            <label>Selecteer een kleur, vul een titel en een beschrijving in</label>
        </div>
        <input class="col col s12 m6" id="notitietitel" placeholder="Vul hier de titel in">

        <input class="col col s12 m12" id="notitiebeschrijving" placeholder="Vul hier de beschrijving in">
        <button class="btn-floating btn-large waves-effect waves-light red" id="addnotities"><i class="material-icons">add</i></button>
    </form>

    <div id="notities"></div>
        </div>
    </div>
        <script src="bundle.js"></script>
        <script src="main.js"></script>
    </body>
</html>

main.js

var form = {}
form.titel = document.querySelector('#notitietitel');
form.beschrijving = document.querySelector('#notitiebeschrijving');
form.addnotitie = document.querySelector('#addnotities');
form.kleur = document.querySelector('#notitiekleur');

var notities = document.querySelector('#notities');

form.titel.focus();


function addNotitie() {
    var titel = form.titel.value;
    titel.split(/((?:\w+ ){5})/g).filter(Boolean).join("\n");
    var beschrijving = form.beschrijving.value;
    beschrijving.split(/((?:\w+ ){5})/g).filter(Boolean).join("\n");
    var notitie = document.createElement('div');
    var deleteButton = document.createElement('span');

    notitie.classList.add('notitie');
    notitie.classList.add(form.kleur.value);
    notitie.innerHTML = `<div class='notitie-titel'>${titel}
    <p class="notitie-beschrijving">${beschrijving}</p></div>`;
    deleteButton.classList.add('notitie-delete');
    deleteButton.innerHTML = '&times;';

    notitie.appendChild(deleteButton);
    notities.appendChild(notitie);

    form.titel.value = '';
    form.titel.focus();
    form.beschrijving.value = '';
    form.beschrijving.focus();

    addDeleteButton(deleteButton);
}

function addDeleteButton(deleteButton) {
    deleteButton.addEventListener('click', function (e) {
        e.stopPropagation();
        deleteNotitie(e);
    });
}

function deleteNotitie(e) {
    let eventNotitie = e.target.parentNode;
    eventNotitie.parentNode.removeChild(eventNotitie);
}


form.addnotitie.addEventListener('click', function (e) {
    e.preventDefault();
    if (form.titel.value && form.beschrijving.value != '') {
        addNotitie();
    }
});

// let itemsArray = [];
//
// localStorage.setItem('items', JSON.stringify(itemsArray));
// const data = JSON.parse(localStorage.getItem('items'));
//
// e.preventDefault();
//
// notesArray.push(form.titel.value, form.beschrijving.value, form.kleur.value);
// localStorage.setItem('items', JSON.stringify(itemsArray));
//
// data.forEach(item => {
//     addNotitie(item)
// });
//
// let notes;
//
// if (localStorage.getItem('items')) {
//     items = JSON.parse(localStorage.getItem('ítems'))
// }else {
//     items = []
// }
//
// let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];
//
//

_opmaak.scss

html {
  font-size: 62.5%;
}

textarea {
  display: block;
  border-radius: 0.4rem;
}

form select,
form button {
  display: inline-block;
  height: 6rem;
}

#notities {
  display: flex;
  flex-wrap: wrap;
  padding-top: 2rem;
}

.notitie {
  width: 24rem;
  height: 20rem;
  font-size: 1.4rem;
  background: #fff;
  border-radius: 0.4rem;
  padding: 1.2rem 1.6rem;
  margin: 2.4rem 2.4rem 0 0;
  box-shadow: 0 0.9rem 1.2rem rgba(0,0,0, 0.1);
  position: relative;
}

.notitie-titel {
  height: 100%;
  font-size: 25px;
  overflow-y: auto;
}

.notitie-beschrijving {
  font-size: 15px;
  overflow-y: auto;
}

.notitie::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.8rem;
  border-radius: 0 0 0.4rem 0.4rem;
}

.notitie.rood {
  background-color: #ff0b00;
}

.notitie.blauw {
  background-color: #0061c8;
}
.notitie.groen {
  background-color: #89e25d;
}
.notitie.geel {
  background-color: #f0df2a;
}

.notitie span {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 0.2rem;
  right: 0.2rem;
  border-radius: 0.4rem;
  color: #f4ffff;
  text-align: center;
}

.notitie span:hover {
  color: #ff0b00;
  background: #f4ffff;
  cursor: pointer;
}
2

Please don’t cross-post. You already asked this in a different forum, and I think the answer I gave you there will provide everything you’re looking for.

3

Sorry, I thought I might have posted it in the wrong forum.

4

lol nah, we’re watching EVERYWHERE. We’re like Santa Claus, only with virtual presents. :wink:

1 Like