Add localstorage and reset

function/LocalStorage.js

@@ -0,0 +1,21 @@
+const resetDiagram = () => {
+    localStorage.clear();
+    location.reload();
+};
+
+const localStorageSize = () => {
+    var _lsTotal = 0,
+        _xLen,
+        _x;
+    for (_x in localStorage) {
+        if (!localStorage.hasOwnProperty(_x)) {
+            continue;
+        }
+        _xLen = (localStorage[_x].length + _x.length) * 2;
+        _lsTotal += _xLen;
+        console.log(
+            _x.substr(0, 50) + " = " + (_xLen / 1024).toFixed(2) + " KB"
+        );
+    }
+    console.log("Total = " + (_lsTotal / 1024).toFixed(2) + " KB");
+};

function/actors.js

@@ -1,5 +1,4 @@
-let actors = [];
-const actorContainer = document.querySelector("#actor-container");
+let actors = JSON.parse(localStorage.getItem("actors")) || [];
 
 const updateActorTitles = () => {
     const actorTitles = document.querySelectorAll(".actor-title-span");
@@ -12,12 +11,14 @@ const updateActorTitles = () => {
 
 const createActor = () => {
     // Create a new actor object
+    const actorContainer = document.querySelector("#actor-container");
     const actor = {
         id: Math.floor(Math.random() * 10000),
         name: "",
         role: "",
     };
 
+
     actors.push(actor);
     // Appends new actor input form
     actorContainer.innerHTML += createActorElement(actor);

function/diagram.js

@@ -24,6 +24,9 @@ const createSwimlane = () => {
         canvas.innerHTML += createSwimlaneElement(actor);
     });
     replaceBoxes();
+    localStorage.setItem("touchpoints", JSON.stringify(touchpoints));
+    localStorage.setItem("actors", JSON.stringify(actors));
+    localStorage.setItem("modal", document.querySelector(".modal").innerHTML);
 };
 
 const createSwimlaneElement = (actor) => {

function/touchpoints.js

@@ -8,7 +8,12 @@ const TouchpointType = {
     communication: "communication",
 };
 
-let touchpoints = [];
+let touchpoints = JSON.parse(localStorage.getItem("touchpoints")) || [];
+
+if (actors.length > 0 || touchpoints.length > 0) {
+    document.querySelector(".modal").innerHTML = localStorage.getItem("modal");
+}
+
 let titleNos = [];
 const touchpointContainer = document.querySelector("#touchpoint-container");
 

index.html

@@ -27,9 +27,13 @@
                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                         <li class="nav-item ">
                             <button type="button" class="btn btn-primary" data-bs-toggle="modal"
-                                data-bs-target="#staticBackdrop" id="start"> Start/Edit </button>
+                                data-bs-target="#staticBackdrop" id="start""> Start/Edit </button>
                         </li>
-                        <li class="nav-item">
+                        <li class=" nav-item ">
+                            <button type=" button" class="btn btn-danger" id="restart" onclick="resetDiagram()">
+                                Reset </button>
+                        </li>
+                        <li class=" nav-item">
                             <a class="nav-link" id="export-xml" href="#" onclick="exportXML()">Export XML</a>
                         </li>
                         <li class="nav-item">
@@ -191,6 +195,7 @@ <h3>Touchpoints
         crossorigin="anonymous"></script>
     <script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
     <script src="function/exportPng.js"></script>
+    <script src="function/LocalStorage.js"></script>
 </body>
 
 </html>