Question

我目前开发了一个用户可以通过选项页面自定义的扩展，我使用localStorage来保存数据。现在我想制作一个用户可以导出自定义数据的功能，这样他就可以与他人共享，用户也可以导入其他人的出口数据。

也就是说，我想要导入和导出功能。

在谷歌搜索stackoverflow，扩展apis之后，我发现chrome扩展无法使用fileSystem api来读/写文件，因为它只能在app中使用，所以我只能从{{3}寻求帮助}}

使用html5 filesystme api，我实际上可以打开一个文件并阅读它。但是谈到编写文件，html5只能在沙箱中写文件，这绝对不是我想要的。

然后我找到了chrome html5 filesystem api。在下载方法中，它需要一个param，也就是url，它将被下载。

所以我的问题是：

是否有可能通过此方法下载localstoage数据，或
有没有其他方法可以保存用户的自定义数据？

Answer 1

Xan讨论引用的解决方案有点过时了。前段时间我在扩展中做了同样的事情。它在GWT框架中，所以现在我很快写了JS版本（见下面的代码）。

流程如下：

生成文件内容作为用户操作的回调（_getFileContents）
使用Blob构造函数创建文件（_createDownloadData）
使用window.URL.createObjectURL（_createDownloadData）获取文件的URL引用
将所需属性设置为将用于下载文件（prepareFileExport）

这种方法需要用户两个步骤：

点击一些＆＃34;准备数据＆＃34;按钮
生成文件后，单击链接下载实际文件。

但您可以在扩展程序中轻松实现下载文件功能。

<强> JavaScript的：

var FileDownload = {

  //Existing file URL.
  exportFileObjectUrl: null,

  // add click listener to the "prepare" button
  initialize: function(){
    FileDownload.prepareButton.addEventListener('click', FileDownload.prepareFileExport);
  },

  // prepare the file and "add" it the download button.
  prepareFileExport: function(e){
    var content = FileDownload._getFileContents();
    var contentType = 'application/json';
    FileDownload.exportFileObjectUrl = FileDownload._createDownloadData(content, contentType);

    var fileName = "some_file.json";
    FileDownload.downloadButton.href = FileDownload.exportFileObjectUrl;
    FileDownload.downloadButton.setAttribute("download", fileName);
    FileDownload.downloadButton.setAttribute("data-downloadurl", contentType + ":" + fileName + ":" + FileDownload.exportFileObjectUrl);
    FileDownload.downloadButton.removeAttribute("hidden");
  },

  // File content generator
  _getFileContents: function(){
    //generate some content as a string.
    var mock = {
      'a': 'test data'
    };
    return JSON.stringify(mock);
  },

  //Result with URL to the file.
  _createDownloadData: function(data, contentType){
    if(FileDownload.exportFileObjectUrl !== null){
      FileDownload._revokeDownloadData();
    }
    var blob = new window.Blob([data], {type: contentType});
    return window.URL.createObjectURL(blob);
  },

  /// Cleanup.
  _revokeDownloadData: function(){
    window.URL.revokeObjectURL(FileDownload.exportFileObjectUrl);
  },

  // a reference to the "prepare" button
  get prepareButton(){
    /// prepare button.
    return document.querySelector('[prepare]');
  },

  // a reference to the "download" button.
  get downloadButton(){
    /// Download button.
    return document.querySelector('[download]');
  }

};

FileDownload.initialize();

<强> HTML：

<button prepare>Prepare data</button>
<a href="about:blank" download hidden>Download data</a>

chrome扩展下载localstorage数据

1 个答案: