Как записать данные localStorage в текстовый файл в Chrome

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: s.

Примечание: для этого требуется как минимум IE8. Но я предполагаю, что это ваше требование в любом случае, так как вы используете localStorage.

Answer 3

Поскольку вопрос помечен как google-chrome-extension, я хочу предоставить более простое решение для разработчиков расширений.

Сначала добавьте «загрузки» к разрешениям в manifest.json

"permissions": [
    "downloads"
]

Затем используйте API-интерфейс загрузок с уловкой data:text/plain, предоставленной @ 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);
});

Чтобы адаптироваться к JSON, просто подготовьте свой объект или массив с помощью JSON.stringify(localStorage.YOUR_DATA), затем используйте data:text/json и измените файл, заканчивающийся на .json

Answer 4

Я также хотел сохранить текст локального хранилища в файл для загрузки, и код работает на настольных компьютерах для Safari, Chrome и Firefox на Mac.Тем не менее, я думаю, что в iOS невозможно сохранить Blob () где-либо с помощью Chrome или Firefox.Это работает, достаточно интересно в Safari.Например, я могу сохранить текстовый файл в своем приложении Wunderlist.Вот ссылка моего репо на Github: Кошачий Шепот на 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-файл, который можно загрузить в виде текстового файла.