跨浏览器实例/页面刷新对本地文件的 Javascript 持久访问

Question

我正在寻找一种方法，允许用户使用标准元素选择文件，并允许浏览器在页面刷新和/或浏览器实例之间持续访问该文件。

场景：

• 我们有一个 Web 应用程序，我们希望将其授权给用户。
• 我们希望向用户发送他们保存到本地计算机的许可文件。
• 他们第一次访问我们的网络应用程序时，会使用一个字段来选择他们计算机上的本地许可证文件
• 以后每次访问应用（无论是关闭浏览器、重启机器等），都可以直接读取许可文件，无需用户重新选择文件。

我们不想使用 localStorage 来存储整个文件，因为文件的最大大小没有限制，并且可能会超出 localStorage 的大小限制。

我已经部分成功：只要原始浏览器选项卡打开，任何其他浏览器实例或选项卡都可以访问该文件并读取它。但是，如果关闭原始选项卡，则本地文件 URL 被破坏。

这部分我是这样做的：

• 当用户从字段中选择一个文件时，使用 window.createObjectURL() 函数为所选文件创建一个对象 URL。
• 将此对象 URL 保存在 localStorage 中

当另一个浏览器实例/选项卡访问此 URL 时，它可以使用 XHR 对象和 FileReader 对象加载文件。这是一段代码：

var xhr = new XMLHttpRequest();
console.log("Reading URL: " + localStorage.savedFile);
xhr.open('GET', localStorage.savedFile, true);
xhr.responseType = 'blob';
xhr.onreadystatechange = function(e)
{
    if (xhr.readyState == 4)
    {
        var myBlob = this.response;
        console.log(myBlob);
        var f = new FileReader();
        f.onload = function(e) { console.log(e); alert("Data read: " + e.target.result); };
        f.readAsText(myBlob);

    }
};
xhr.send();

如您所见，xhr 对象返回一个 blob，并且可以将其直接发送到 FileReader 对象以读取数据。

只要原始选项卡（他们选择文件的选项卡）处于打开状态，它就可以完美运行。但显然 createObjectURL() 生成的 URL 在关闭选项卡时会被销毁（从垃圾收集的角度来看这是有道理的）。

任何人都可以想出一种方法来跨实例/选项卡保留 URL，而无需保持原始选项卡保持打开状态，并允许访问相同的本地文件，而无需用户在每次访问应用程序时手动选择它?

Answer 1

这与单点登录非常相似，但需要额外的验证。

这是一种解决方案：

• 创建许可证的哈希（或加密“许可证密钥”，许可证的一些唯一标识符）
• 将哈希值存储在 cookie 或本地存储中
• 还将哈希传递给服务器并保存哈希与客户端之间的映射，以及上次访问的日期/时间
• 每次用户登录时，验证 cookie 或本地存储是否存在散列条目以及散列的有效性。您可能还需要对上次使用的列表、客户端数量等执行其他验证。