ChromeのテキストファイルにlocalStorageデータを書き込む方法

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

、最も簡単な方法は、使用するデータURIである（もちろんPHPである必要はありません）ブラウザにファイルを保存し、ユーザーが必要な場所に保存できるようにします。私はそのような種類のURIに対して「名前を付けて保存」 - ダイアログを表示することはできないと考えています。

注：IE8以上が必要です。しかし、あなたがlocalStorageを使用しているので、とにかくそれがあなたの要件だと思います。

Answer 2

PHPでダウンロードできるテキストファイルにその内容を書き込む必要があります。 JavaScriptではこれは私が考えることができません。あなたはテキストファイルとしてダウンロードできるPHPファイルにPOSTリクエストを送ることができます。

data:text/plain,Your text here 

これは、テキストが表示されます：あなたは、サーバー側のソリューションを使用しない場合

Answer 3

このconsole.save（data、[filename]）メソッドが見つかりました。このトリックをコンソールに追加すると非常に簡単です。ファイルをダウンロードすると、デフォルトのダウンロードフォルダに直接移動するだけであることに注意してください。それを追加するには、単純に実行しますので、同様にデータとファイル名を渡し、console.save（データ、[ファイル名]）すると

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

をして、ファイルが作成され、ダウンロードされます。

出典：質問は、私は拡張機能の開発者のための簡単なソリューションを提供したいグーグル・クロームの拡張でタグ付けされているので

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

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

Answer 4

。

まず、@のエミール・stenströmによって提供されるdata:text/plainトリックでダウンロード-APIを使用するとmanifest.json

"permissions": [ 
    "downloads" 
] 

の権限に "ダウンロード" を追加します。

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

だけdata:text/jsonを使用し、その後、JSON.stringify(localStorage.YOUR_DATA)であなたのオブジェクトまたは配列を作成し、JSONのために適応し、私もダウンロード用のファイルに自分のローカルストレージ・テキストを保存したいと考えていました.json

Answer 5

に終わるファイルを変更するにはこのコードは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);