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

Я хочу записать элемент 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.

пожалуйста, помогите мне расширить этот код.

6
google-chrome-extension html5 javascript

5 ответов

Если вы не хотите использовать серверное решение (конечно, не обязательно PHP), самый простой способ-использовать URI данных:

data:text/plain,Your text here

Это покажет текстовый файл в браузере, и позволяет пользователю сохранить его там, где они хотят. Я не думаю, что можно показать диалог"Сохранить как" для таких URI: s.

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

4

Я нашел эту консоль.метод 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)

затем передайте данные и имя файла, например, консоль.сохраните (data, [filename]), и файл будет создан и загруженный.

источник:

https://plus.google.com/ + AddyOsmani/посты/jBS8CiNTESM

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

7

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

во-первых, добавьте "загрузки" в разрешения в manifest.json

"permissions": [
    "downloads"
]

затем используйте 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

1

Я также хотел сохранить текст локального хранилища в файл для загрузки, и код работает на рабочем столе для Safari, Chrome и Firefox на Mac. Тем не менее, я думаю, что в iOS невозможно сохранить Blob() в любом месте с Chrome или Firefox. Это действительно работает, что интересно в Safari. Например, я могу сохранить текстовый файл в приложении Wunderlist. Вот ссылка моего РЕПО на Github:кошачий Шептун на Github GH-страницах

вот 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);
0

вы должны записать этот контент в текстовый файл, который можно загрузить с помощью PHP. С JavaScript это невозможно, я думаю. Вы можете отправить POST-запрос в файл php, который можно загрузить в виде текстового файла.

-1