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를 사용하면 이것이 불가능하다고 생각합니다. POST 요청을 텍스트 파일로 다운로드 할 수있는 PHP 파일로 보낼 수 있습니다.

data:text/plain,Your text here 

이 텍스트를 표시합니다 : 서버 측 솔루션을 사용하지 않으려면

Answer 3

트릭을 꽤 쉽게 콘솔에 추가 할 수있는 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 (데이터, [파일 이름]) 및 파일 생성 및 다운로드됩니다.

출처 : 질문 내가 확장 개발자를위한 간단한 솔루션을 제공하려는 구글 - 크롬 확장 태그 때문에

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 앱에 저장할 수 있습니다.

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