How can I save notes with localstorage and JSON?

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!


<!DOCTYPE html>
        <link href="style.css" media="screen,projection" rel="stylesheet" type="text/css"/>
        <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <h1 class="center-align">Notities</h1>
    <div class="container">
        <div class="row">
        <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>
            <label>Selecteer een kleur, vul een titel en een beschrijving in</label>
        <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>

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


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');


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.innerHTML = `<div class='notitie-titel'>${titel}
    <p class="notitie-beschrijving">${beschrijving}</p></div>`;
    deleteButton.innerHTML = '&times;';


    form.titel.value = '';
    form.beschrijving.value = '';


function addDeleteButton(deleteButton) {
    deleteButton.addEventListener('click', function (e) {

function deleteNotitie(e) {
    let eventNotitie =;

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

// 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')) : [];


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;

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.

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

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

1 Like