javascript - 将 json 字符串保存到客户端电脑（使用 HTML5 API）

Question

我读过一些相同的旧线程，但最近看到文件 API 发生了很大变化。我的要求是保存一个 json 文件（数据在 indexdDB 中本地，但我需要一种方法来备份它）。由于我使用 indexdDB，所以我只针对最近的浏览器，主要是 chrome。那么，是否可以将数据（json 字符串）保存到客户端计算机？

我见过http://eligrey.com/demos/FileSaver.js/，但是有没有办法在本地做到这一点？

谢谢。

Answer 1

您可以使用 aBlob和 HTML5a[download]功能来提供 JSON 备份下载：

var data = {a:1, b:2, c:3};
var json = JSON.stringify(data);
var blob = new Blob([json], {type: "application/json"});
var url  = URL.createObjectURL(blob);

var a = document.createElement('a');
a.download    = "backup.json";
a.href        = url;
a.textContent = "Download backup.json";

这是一个 jsfiddle 示例：http: //jsfiddle.net/potatosalad/yuM2N/

Answer 2

是的你可以。这假设您有 json 在text：

var toDownload=new Blob([text],{type:'x-whatever/x-backup'});
var link=window.URL.createObjectURL(toDownload);
window.location=link;

这是未经测试的，但它应该工作。

Answer 3

您可以使用FileSaver.js。

示例代码：

//include the js file in html.
<script src="FileSaver.min.js"></script>    

// other code ...

//use it here.
var myjson= "{a:3, b:4}";
var blob = new Blob([myjson], {type: "application/json"});

var saveAs = window.saveAs;
saveAs(blob, "my_outfile.json");

用于JSON.stringify从 JSON 创建字符串。

小提琴：https ://jsfiddle.net/9w9ofec4/3/

Answer 4

根据土豆沙拉的答案，我尝试了一个“自我”更新链接：
jsfiddle

function saveAsFile(link, content, filename) {
    var blob = new Blob([content], {type: "text/text"});
    var url  = URL.createObjectURL(blob);

    // update link to new 'url'
    link.download    = filename + ".txt";
    link.href        = url;
}

saveAsFile(this, "YourContent", "HelloWorldFile");

该函数saveAsFile()需要调用a元素作为第一个参数。
而不是将href目标更新为新的 blob。

Answer 5

function saveAsJSON(data, name=Date.now()+'.json') {
  const a = document.createElement('a')
  a.download = name
  a.href = URL.createObjectURL(new Blob([JSON.stringify(data)], {type: 'application/json'}))
  a.click()
}

// https://stackoverflow.com/questions/62371219/chrome-stops-download-files-from-stackoverflow-snippets
saveAsJSON(['orange', 'banana', {name: 'apple'}])