Add localStorge adapter to restore clocks after page reload

clocks.js

@@ -2,6 +2,29 @@ var clocks = [];
 var nextClock = 1;
 var DateTime = luxon.DateTime;
 
+function LoadClocks(){
+    let jclocks = localStorage.getItem("clocks");
+    if (jclocks){
+        jclocks = JSON.parse(jclocks);
+        jclocks.forEach((v)=>{
+            let clock = createClock();
+            clock.data().startTime = DateTime.fromSeconds(v.startTime);
+            $("#clocks").append(clock);
+            clocks.push(clock);
+        })
+    }
+}
+
+function StoreClocks(){
+    let jclocks = [];
+    clocks.forEach((v)=>{
+        jclock = { "startTime": v.data().startTime.toSeconds() }
+        jclocks.push(jclock);
+    });
+    localStorage.setItem("clocks",JSON.stringify(jclocks) );
+}
+
+
 function removeClock(clock){
     let i = clocks.indexOf(clock);
     clocks.splice(i, 1);
@@ -53,4 +76,5 @@ function btnStartNewClock(){
     updateClock(clock);
     $("#clocks").append(clock);
     clocks.push(clock);
+    StoreClocks();
 }

index.html

@@ -27,6 +27,7 @@
     <div class="container w-100"><div id="clocks" class="row"></div></div>
 
     <script type="application/javascript">
+        LoadClocks();
         setInterval(updateClocks, 250);
     </script>
 </body>