问为多项设置localStorage

EN

saveBtn = document.getElementsByClassName('saveBtn');

//  creates a new instance for time and date.
const currentDay = luxon.DateTime.now().toLocaleString(luxon.DateTime.DATETIME_MED);
//  format's the date and time.
var newFormat = {
    //  The selected date format from luxon documentation.
    ...luxon.DateTime.DATETIME_MED,
    //  added the day of the week.
    weekday: 'long'
};

// creates a new instance for time and date.
const newCurrentDay = luxon.DateTime.now().toLocaleString(newFormat);
//  checks if time works.


//  creates a new instance to parse the date and time into the header html.
var ol = document.querySelector('header');
//  creates the ol element.
const list = document.createElement('ol');
//  styles the <ol> element.
list.setAttribute('style', 'color: white; background-color: black; display: flex; flex-direction: column; justify-content: center; align-items: center;');
//  displays newCurrentDay variable in the header as readable text.
list.innerText = newCurrentDay;
//  appends the newCurrentDay variable to the ol element.
ol.appendChild(list);

//  creates an array to change the blocks bases on their time in the text area element.
const timeBlocks = Array.from(document.getElementsByClassName('description'));
// assigning timeBlocks based on time.
for (var i = 0; i < timeBlocks.length; i++) {
    //  gets the current hour to connect the color changing feature in the text area element based on the 24hr format.
    const now = luxon.DateTime.now().hour.toLocaleString();
    //  if statement's to change the color of the blocks based on time using the 24hr time format.
    if (timeBlocks[i].id < now) {
        timeBlocks[i].classList.add('past');
    }
    if (timeBlocks[i].id > now) {
        timeBlocks[i].classList.add('future');
    }
    if (timeBlocks[i].id === now) {
        timeBlocks[i].classList.add('present');
    }
}


// // * testing
// saveBtn = document.getElementsByClassName('saveBtn');

// var save = addEventListener('click', function () {
//     //  creates a new instance to parse the date and time into the header html. 
//     var textarea = document.querySelector('textarea');

//     this.window.localStorage.setItem('textarea', textarea.value);

//     this.window.localStorage.getItem('textarea');
// });




//  TODO: can  use save button for event text to persist even when refreshed.

// $('.saveBtn').on("click", function () {
//     window.localStorage.setItem('task', $(this).siblings('.description').val());
// })

// loadTask = function () {
//     return window.localStorage.getItem('task');
// }


// let taskArray = [{
//     21: "",
//     22: "",
//     23: "",
// }];

// $('.saveBtn').on("click", function () {
//     window.localStorage.setItem('tasks', JSON.stringify(taskArray));

//     JSON.parse(window.localStorage.getItem('tasks'));

// var storedData = window.localStorage.getItem(taskArray);

// if (storedData) {
//     taskArray = JSON.parse(storedData);
//     alert(taskArray);
// }
// });


// TODO:  event is saved into time block using local storage


// TODO:  have my minutes actively change. 

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1;
}

textarea {
  background: transparent;
  border: none;
  resize: none;
  color: #000000;
  border-left: 1px solid black;
  padding: 10px;
}

.jumbotron {
  text-align: center;
  background-color: transparent;
  color: black;
  border-radius: 0;
  border-bottom: 10px solid black;
}

.description {
  white-space: pre-wrap;
}

.time-block {
  text-align: center;
  border-radius: 15px;
}

.row {
  white-space: pre-wrap;
  height: 80px;
  border-top: 1px solid white;
  ;
}

.hour {
  background-color: #ffffff;
  color: #000000;
  border-top: 1px dashed #000000;
}

.past {
  background-color: #d3d3d3;
  color: white;
}

.present {
  background-color: #ff6961;
  color: white;
}

.future {
  background-color: #77dd77;
  color: white;
}

.saveBtn {
  border-left: 1px solid black;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: #06AED5;
  color: white;
}

.saveBtn i:hover {
  font-size: 20px;
  transition: all .3s ease-in-out;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="./assets/css/style.css" />
  <title>Work Day Scheduler</title>
</head>

<body>
  <header class="jumbotron">
    <h1 class="display-3">Work Day Scheduler</h1>
    <p class="lead">A simple calendar app for scheduling your work day</p>
    <p id="currentDay" class="lead"></p>
  </header>
  <div class="container">
    <!-- Time blocks go here -->
    <div class="row">
      <div class="col-2 border-top border-dark">
        9:00PM
      </div>
      <textarea class="description col-8" id="21">Event</textarea>
      <button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
    </div>
    <div class="row">
      <div class="col-2 border-top border-dark">
        10:00PM
      </div>
      <textarea class="description col-8" id="22">Event</textarea>
      <button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
    </div>
    <div class="row">
      <div class="col-2 border-top border-dark">
        11:00PM
      </div>
      <textarea class="description col-8" id="23">Event</textarea>
      <button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
    </div>
    <div class="row">
      <div class="col-2 border-top border-dark">
        12:00AM
      </div>
      <textarea class="description col-8" id="0">Event</textarea>
      <button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
    </div>
    <!-- <div class="row">
      <div class="col-2 border-top border-dark">
        1:00PM
      </div>
      <textarea class="description col-8" id="13">Event</textarea>
      <button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
    </div>
    <div class="row">
      <div class="col-2 border-top border-dark">
        2:00PM
      </div>
      <textarea class="description col-8" id="14">Event</textarea>
      <button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
    </div>
    <div class="row">
      <div class="col-2 border-top border-dark">
        3:00PM
      </div>
      <textarea class="description col-8" id="15">Event</textarea>
      <button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
    </div>
    <div class="row">
      <div class="col-2 border-top border-dark">
        4:00PM
      </div>
      <textarea class="description col-8" id="16">Event</textarea>
      <button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
    </div>
    <div class="row">
      <div class="col-2 border-top border-dark">
        5:00PM
      </div>
      <textarea class="description col-8" id="17">Event</textarea>
      <button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
    </div> -->


    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
    <script src="/assets/javascript/script.js"></script>
</body>

</html>