如何在没有任何数据库的情况下在我的网站中缓存用户上传的文件

Question

我正在使用 pdfjs 库制作一个 pdf reader 网站，我想制作类似于此网站的东西 https://pdfviewer.softgateon.net/ which also uses pdfjs, though it's too old, but a nice thing about that website is that when I upload my pdf file, and after I'm done reading it, I close my browser and then tomorrow when I open that website, the pdf is already there at the last page that I was reading, I wanted to make the same capability for my website, but I have no idea how it's done, my website is only made by javascript, and I uploaded it on github pages, https://smh6.github.io/PDFWIZ/

它是如何工作的，你上传你的文件，然后，我删除主页 HTML 然后我添加阅读模式页面的 HTML，我能得到那个功能吗在我的网站上？它没有任何后端，它是纯粹的 javascript

是否与我使用的主机有关，或者可以用 javascript 完成？

Answer 1

您可以使用cookie来保存它。

这里应该放你用来打开文件的东西（路径、参数或其他）

var lastFile = document.cookie = "lastFile=file"

然后每次加载页面时，只需检查该 cookie 是否存在，如果存在，则打开文件。

if(lastFile){
     // open file
}

Answer 2

如评论中所述，添加 PDF 后，将其存储在客户端数据库中（如 localforage），这会将 PDF 作为 blob 持久存储在存储中，然后在下次访问时您可以加载它然后再次渲染它。

在线示例： https://localforage-pdf.glitch.me

基本示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js"
      integrity="sha512-+BMamP0e7wn39JGL8nKAZ3yAQT2dL5oaXWr4ZYlTGkKOaoXM/Yj7c4oy50Ngz5yoUutAG17flueD4F6QpTlPng=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
  </head>
  <body>
    <div id="pdf"></div>

    <input type="file" onchange="loadPDF(this)" accept="application/pdf" />

    <button id="clearPDF">
      Remove PDF
    </button>

    <script>
      // clear and initial display
      document.getElementById("clearPDF").onclick = function() {
        localforage.removeItem("lastPDF");
        document.getElementById("pdf").style.display = "none";
      };
      document.getElementById("pdf").style.display = "none";

      // render the pdf object, if you use a diff lib implement it here
      const renderPDF = function(src) {
        const resource = (window.URL || window.webkitURL).createObjectURL(
          new Blob([src], { type: "application/pdf" })
        );

        const object = document.createElement("object");
        object.setAttribute("data", resource);
        object.setAttribute("type", "application/pdf");
        object.setAttribute("width", "500");
        object.setAttribute("height", "678");

        const iframe = document.createElement("iframe");
        iframe.setAttribute("src", resource);
        iframe.setAttribute("width", "500");
        iframe.setAttribute("height", "678");
        iframe.innerHTML = "<p>This browser does not support PDF!</p>";

        object.append(iframe);

        document.getElementById("pdf").replaceChildren(object);

        // show it
        document.getElementById("pdf").style.display = "block";
      };

      // load the PDF from file input, render then store in storage
      const loadPDF = elm => {
        const fr = new FileReader();
        fr.onload = () => {
          // render
          renderPDF(fr.result);

          // store
          localforage.setItem("lastPDF", fr.result);
        };
        fr.readAsArrayBuffer(elm.files[0]);
      };

      // load and render last stored pdf
      localforage.getItem("lastPDF", (err, value) => {
        if (err || !value) return;
        renderPDF(value);
      });
    </script>
  </body>
</html>

如何在没有任何数据库的情况下在我的网站中缓存用户上传的文件

How can I cache the uploaded file of the user in my website, without any database

javascript

browser-cache

pdf.js