How to write localStorage data to a text file in Chrome

Question

I want to write a localStorage element to a text file and I want to call the user to store the file in the specified location. Please help me with the code extension

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. 

Please help me extend this code.

Answer 1

If you do not want to use a server solution (of course, not necessarily PHP), the easiest way is to use a data URI:

 data:text/plain,Your text here 

This will display the text file in the browser and allow the user to save it wherever they want. I don’t think it’s possible to show a “Save As” dialog for this type of URI: s.

Note: this requires at least IE8. But I assume that your requirement is anyway, since you are using localStorage.

Answer 2

I found this method console.save (data, [filename]), which you can add to the console, which handles the trick easily. Note that when a file is downloaded, it simply goes directly to the default download folder. To add it, just run:

 (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) 

Then pass the data and file name like this: console.save (data, [filename]), and the file will be created and uploaded.

A source:

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

http://bgrins.imtqy.com/devtools-snippets/#console-save

Answer 3

Since the question is marked by the google-chrome extension, I want to provide a simpler solution for extension developers.

First add “downloads” to permissions in manifest.json

 "permissions": [ "downloads" ] 

Then use the download API with the data:text/plain trick provided by @ emil-stenström.

 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); }); 

To adapt for JSON, just prepare your object or array with JSON.stringify(localStorage.YOUR_DATA) , then use data:text/json and change the file ending in .json

Answer 4

I also wanted to save my local storage file to a download file, and the code runs on the desktop for Safari, Chrome and Firefox on Mac. However, I think in iOS it is not possible to save Blob () anywhere with Chrome or Firefox. It really works, which is pretty interesting in Safari. For example, I can save a text file in my Wunderlist application. Here is the link of my repo on Github: Whisperer wallet on github gh pages

Here is the JavaScript code:

 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

You must write this content to a text file that can be downloaded using PHP. With JavaScript this is not possible, I think. You can send a POST request to a php file, which can be downloaded as a text file.