store files only locally

main.js

@@ -184,85 +184,81 @@
     return el
   }
 
-  function handleFiles() {
-    let dt = new DataTransfer()
+  function makeHandleFilesFunc() {
+    let storedFiles = []
 
-    let storageLabel = `files-${this.dataset.index}`
+    return function() {
+      let dt = new DataTransfer()
 
-    let storedFiles = sessionStorage.getItem(storageLabel)
-    if (storedFiles) {
-      let oldFiles = JSON.parse(sessionStorage.getItem(storageLabel))
-      for (const oldFile of oldFiles) {
-        let oldFileObj = dataURLtoFile(oldFile.data, oldFile.name)
-        dt.items.add(oldFileObj)
-      }
-    }
-
-    for (let i = 0; i < this.files.length; i++) {
-      const file = this.files[i]
-      dt.items.add(file)
-
-      let fileListContainer = this.parentElement.parentElement.querySelector(".file-list-container")
-      let fileContainer = document.createElement("div")
-      fileContainer.classList.add("file-container")
-
-      const displayedFile = getHtmlElementByFileType(file)
-      displayedFile.classList.add("preview")
-      displayedFile.file = file
-      displayedFile.addEventListener("click", () => {
-        let dialog = document.querySelector("dialog")
-        dialog.appendChild(displayedFile.cloneNode(true))
-        dialog.showModal()
-      })
-
-      let fileButtonsContainer = document.createElement("div")
-      fileButtonsContainer.classList.add("file-buttons-container")
-
-      let downloadLink = makeDownloadLink(file.name)
-      fileButtonsContainer.appendChild(downloadLink)
-
-      let deleteButton = document.createElement("button")
-      deleteButton.classList.add("button-delete")
-      deleteButton.textContent = "x"
-      deleteButton.type = "button"
-      deleteButton.addEventListener("click", e => {
-        let index = [...fileListContainer.children].indexOf(fileContainer)
-
-        if (!confirm("Точно?")) return
-  
-        let storedFiles = JSON.parse(sessionStorage.getItem(storageLabel)) ?? []
-        storedFiles.splice(storedFiles.length - this.files.length + index, 1)
-        sessionStorage.setItem(storageLabel, JSON.stringify(storedFiles))
-        
-        let rdt = new DataTransfer()
-        for (const file of this.files) {
-          rdt.items.add(file)
+      if (storedFiles.length) {
+        for (const oldFile of storedFiles) {
+          let oldFileObj = dataURLtoFile(oldFile.data, oldFile.name)
+          dt.items.add(oldFileObj)
         }
-        rdt.items.remove(index)
-        this.files = rdt.files
-  
-        fileListContainer.removeChild(fileContainer)
-      })
-      fileButtonsContainer.appendChild(deleteButton)
-
-      fileContainer.appendChild(displayedFile)
-      fileContainer.appendChild(fileButtonsContainer)
-
-      fileListContainer.appendChild(fileContainer)
-
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        displayedFile.src = e.target.result
-        downloadLink.setAttribute("href", displayedFile.src)
-
-        let storedFiles = JSON.parse(sessionStorage.getItem(storageLabel)) ?? []
-        storedFiles.push({data: displayedFile.src, name: file.name})
-        sessionStorage.setItem(storageLabel, JSON.stringify(storedFiles))
       }
-      reader.readAsDataURL(file)
-    }
 
-    this.files = dt.files
+      for (let i = 0; i < this.files.length; i++) {
+        const file = this.files[i]
+        dt.items.add(file)
+
+        let fileListContainer = this.parentElement.parentElement.querySelector(".file-list-container")
+        let fileContainer = document.createElement("div")
+        fileContainer.classList.add("file-container")
+
+        const displayedFile = getHtmlElementByFileType(file)
+        displayedFile.classList.add("preview")
+        displayedFile.file = file
+        displayedFile.addEventListener("click", () => {
+          let dialog = document.querySelector("dialog")
+          dialog.appendChild(displayedFile.cloneNode(true))
+          dialog.showModal()
+        })
+
+        let fileButtonsContainer = document.createElement("div")
+        fileButtonsContainer.classList.add("file-buttons-container")
+
+        let downloadLink = makeDownloadLink(file.name)
+        fileButtonsContainer.appendChild(downloadLink)
+
+        let deleteButton = document.createElement("button")
+        deleteButton.classList.add("button-delete")
+        deleteButton.textContent = "x"
+        deleteButton.type = "button"
+        deleteButton.addEventListener("click", e => {
+          let index = [...fileListContainer.children].indexOf(fileContainer)
+
+          if (!confirm("Точно?")) return
+    
+          storedFiles.splice(storedFiles.length - this.files.length + index, 1)
+          
+          let rdt = new DataTransfer()
+          for (const file of this.files) {
+            rdt.items.add(file)
+          }
+          rdt.items.remove(index)
+          this.files = rdt.files
+    
+          fileListContainer.removeChild(fileContainer)
+        })
+        fileButtonsContainer.appendChild(deleteButton)
+
+        fileContainer.appendChild(displayedFile)
+        fileContainer.appendChild(fileButtonsContainer)
+
+        fileListContainer.appendChild(fileContainer)
+
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          displayedFile.src = e.target.result
+          downloadLink.setAttribute("href", displayedFile.src)
+
+          storedFiles.push({data: displayedFile.src, name: file.name})
+        }
+        reader.readAsDataURL(file)
+      }
+
+      this.files = dt.files
+    }
   }
 
   let prettifyFiles = (function() {
@@ -285,7 +281,7 @@
         fileListContainer.classList.add("file-list-container")
         element.parentElement.parentElement.appendChild(fileListContainer)
     
-        element.addEventListener("change", handleFiles, false)
+        element.addEventListener("change", makeHandleFilesFunc(), false)
       })
 
       moveFileInputValues(insertedFileRows)