Cómo escribir datos de LocalStorage en un archivo de texto en Chrome

Question

Quiero escribir un elemento localStorage en un archivo de texto y quiero invocar al usuario para almacenar el archivo en una ubicación especificada. Por favor, ayúdenme a extender el código

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. 

Ayúdenme a ampliar este código.

Answer 1

Si no desea utilizar una solución de servidor (no tiene que ser, por supuesto, PHP), la forma más fácil es usar un URI de datos:

data:text/plain,Your text here 

Esto mostrará el texto archivo en el navegador y permita que el usuario lo guarde donde lo desee. No creo que sea posible mostrar un diálogo "Guardar como" para ese tipo de URI: s.

Nota: esto requiere IE8 al menos. Pero supongo que ese es tu requisito de todos modos, ya que estás usando localStorage.

Answer 2

Tienes que escribir ese contenido en un archivo de texto que se puede descargar con PHP. Con JavaScript esto no es posible, creo. Puede enviar una solicitud POST a un archivo php que se puede descargar como un archivo de texto.

Answer 3

Encontré este método console.save (data, [filename]) que puede agregar a la consola que hace el truco bastante fácilmente. Tenga en cuenta que cuando el archivo se descarga, va directamente a la carpeta predeterminada de descargas. Para añadirlo simplemente ejecute:

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

Luego pase en el nombre del archivo de datos y como tal, console.save (datos, [nombre de archivo]) y el archivo será creado y descargado.

Fuente:

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

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

Answer 4

Dado que la cuestión se etiqueta con google-cromo-extensión Quiero ofrecer una solución más simple para desarrolladores de extensiones.

En primer lugar, añadir "descargas" de permisos en manifest.json

"permissions": [ 
    "downloads" 
] 

A continuación, utilice la API de descargas-trick con el data:text/plain lo dispuesto por @ 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); 
}); 

Para adaptar para JSON, simplemente preparar su objeto o matriz con JSON.stringify(localStorage.YOUR_DATA), a continuación, utilizar data:text/json y cambiar el archivo que termina a .json

Answer 5

También había querido salvar mi texto de almacenamiento local a un archivo para descargar y el código funciona en el escritorio para Safari, Chrome y Firefox en Mac. Sin embargo, creo que es imposible en iOS guardar el Blob() en cualquier lugar con Chrome o Firefox. Funciona, curiosamente en Safari. Por ejemplo, puedo guardar el archivo de texto en mi aplicación Wunderlist. Aquí está el enlace a mi repo en Github: The Cat Whisperer on Github gh-pages

Este es el código 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);