我们如何从url下载文件并将该文件保存在react js中的localstorage中

Question

我有一个URL，点击后在我的计算机本地下载一个文件，但我想把这个文件存储在我的浏览器的本地存储中，而不是我的计算机的本地React应用中

Answer 1

尝试使用localStorage.setItem(key:value(来存储值并获取值localStorage.getItem(key(

例如：localStorage.setItem("urlcontent"，value(localStorage.getItem("urlContent"(

对于密钥提供名称和值存储下载的URL内容，在浏览器中存储数据不是最佳做法，浏览器具有5MB的存储容量。检查此项：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Answer 2

基本上，为了下载文件，我们创建一个新的a标记，并设置url和href以下载它，如下所示：

const link = document.createElement("a");
link.href = URL.createObjectURL(new Blob([action.payload.canvasJSON], { type: "application/json" }));
link.download = Math.random().toFixed(3) + ".json";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

如果你想将下载的文件的内容保存在localStorage或Cookies中，你只需设置内容或任何你需要的信息，如下所示：

const link = document.createElement("a");
link.href = URL.createObjectURL(new Blob([action.payload.canvasJSON], { type: "application/json" }));
localStorage.setItem(filename, link.href);
link.download = Math.random().toFixed(3) + ".json";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

当然，您可以使用Cookie和indexDB等其他浏览器存储来实现同样的目标，但请注意，第三方Cookie在接下来的2023年将不受支持。

请参阅：https://www.cookiebot.com/en/google-third-party-cookies/