Question

我想将localStorage项写入文本文件，并希望调用用户将文件存储在指定位置。请帮我扩展代码

  var data = JSON.parse(localStorage.getItem(pid));   
  var Text2Write = "";
  for(var pr in ele)
  {
     var dat = pr + ":" + ele[pr] + "\n";
     Text2Write += dat;
  }
  // Here I want to store this Text2Write to text file and ask user to save where he wants.

请帮我扩展此代码。

Answer 1

我发现这个console.save（data，[filename]）方法可以添加到控制台，非常容易实现。请注意，下载文件时，它会直接进入默认下载文件夹。要添加它，只需运行：

(function(console){

    console.save = function(data, filename){

        if(!data) {
            console.error('Console.save: No data')
            return;
        }

        if(!filename) filename = 'console.json'

        if(typeof data === "object"){
            data = JSON.stringify(data, undefined, 4)
        }

        var blob = new Blob([data], {type: 'text/json'}),
            e    = document.createEvent('MouseEvents'),
            a    = document.createElement('a')

        a.download = filename
        a.href = window.URL.createObjectURL(blob)
        a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
        e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
        a.dispatchEvent(e)
    }
})(console)

然后传递数据和文件名，就像这样，console.save（data，[filename]），文件将被创建和下载。

来源：

https://plus.google.com/+AddyOsmani/posts/jBS8CiNTESM

http://bgrins.github.io/devtools-snippets/#console-save

Answer 2

如果您不想使用服务器端解决方案（当然不必是PHP），最简单的方法是使用数据URI：

data:text/plain,Your text here

这将在浏览器中显示文本文件，并让用户将其保存在他们想要的位置。我不认为可以为这些URI显示“另存为”-dialog：s。

注意：这至少需要IE8。但我猜这是你的要求，因为你使用的是localStorage。

Answer 3

由于问题是使用google-chrome-extension标记的，我想为扩展程序开发人员提供更简单的解决方案。

首先，将“下载”添加到manifest.json

中的权限

"permissions": [
    "downloads"
]

然后使用@ emil-stenström提供的data:text/plain技巧的downloads-API。

var myString = localStorage.YOUR_VALUE;
chrome.downloads.download({
    url: "data:text/plain," + myString,
    filename: "data.txt",
    conflictAction: "uniquify", // or "overwrite" / "prompt"
    saveAs: false, // true gives save-as dialogue
}, function(downloadId) {
    console.log("Downloaded item with ID", downloadId);
});

要适应JSON，只需使用JSON.stringify(localStorage.YOUR_DATA)准备对象或数组，然后使用data:text/json并将文件结尾更改为.json

Answer 4

我还想将我的本地存储文本保存到文件中进行下载，代码适用于Mac上的Safari，Chrome和Firefox的桌面。但是，我认为在iOS中无法使用Chrome或Firefox将Blob（）保存在任何地方。它确实有用，有趣的是在Safari中。例如，我可以将文本文件保存到我的Wunderlist应用程序中。这是我在Github上的回购链接：The Cat Whisperer on Github gh-pages

以下是JavaScript代码：

const fileDownloadButton = document.getElementById('save');
function localStorageToFile() {
    const csv = JSON.stringify(localStorage['autosave']);
    const csvAsBlob = new Blob([csv], {type: 'text/plain'});
    const fileNameToSaveAs = 'local-storage.txt';
    const downloadLink = document.getElementById('save');
    downloadLink.download = fileNameToSaveAs;
    if (window.URL !== null) {
        // Chrome allows the link to be clicked without actually adding it to the DOM
        downloadLink.href = window.URL.createObjectURL(csvAsBlob);
        downloadLink.target = `_blank`;
    } else {
        downloadLink.href = window.URL.createObjectURL(csvAsBlob);
        downloadLink.target = `_blank`;
        downloadLink.style.display = 'none';
        // add .download so works in Firefox desktop.
        document.body.appendChild(downloadLink.download);
    }
    downloadLink.click();
}
// file download button event listener
fileDownloadButton.addEventListener('click', localStorageToFile);

Answer 5

您必须将该内容写入可以使用PHP下载的文本文件中。使用JavaScript，我认为这是不可能的。您可以将POST请求发送到php文件，该文件可以作为文本文件下载。

如何将localStorage数据写入Chrome中的文本文件

5 个答案: