Cách ghi dữ liệu localStorage vào tệp văn bản trong Chrome

Question

Tôi muốn viết mục localStorage vào tệp văn bản và muốn gọi người dùng lưu trữ tệp ở một vị trí được chỉ định. Vui lòng giúp tôi với việc mở rộng mã

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. 

Vui lòng giúp tôi mở rộng mã này.

Answer 1

Nếu bạn không muốn sử dụng một giải pháp server-side (không phải là PHP dĩ nhiên), cách dễ nhất là sử dụng một dữ liệu URI:

data:text/plain,Your text here 

này sẽ hiển thị các văn bản trong trình duyệt và cho phép người dùng lưu nó ở nơi họ muốn. Tôi không nghĩ rằng nó có thể hiển thị một "Save as" -dialog cho những loại URI: s.

Lưu ý: điều này yêu cầu IE8 ít nhất. Nhưng tôi đoán đó là yêu cầu của bạn, vì bạn đang sử dụng localStorage.

Answer 2

Bạn phải viết nội dung đó vào một tệp văn bản có thể tải xuống bằng PHP. Với JavaScript, điều này là không thể tôi nghĩ. Bạn có thể gửi yêu cầu POST tới tệp php có thể tải xuống dưới dạng tệp văn bản.

Answer 3

Tôi đã tìm thấy phương thức console.save (dữ liệu, [tên tệp]) này mà bạn có thể thêm vào bảng điều khiển thực hiện thủ thuật khá dễ dàng. Lưu ý rằng khi tệp được tải xuống, nó chỉ chuyển trực tiếp vào thư mục tải xuống mặc định. Để thêm nó chỉ đơn giản chạy:

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

Sau đó vượt qua trong các dữ liệu và tên tập tin như vậy, console.save (dữ liệu, [filename]) và các tập tin sẽ được tạo ra và tải về.

Nguồn:

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

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

Answer 4

Kể từ khi câu hỏi được gắn thẻ với google-chrome-mở rộng tôi muốn cung cấp một giải pháp đơn giản cho các nhà phát triển mở rộng.

Đầu tiên, thêm "tải" đến quyền trong manifest.json

"permissions": [ 
    "downloads" 
] 

Sau đó sử dụng tải-API với các trick data:text/plain theo quy định của @ 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); 
}); 

Để thích ứng cho JSON, chỉ cần chuẩn bị đối tượng hoặc mảng của bạn với JSON.stringify(localStorage.YOUR_DATA), sau đó sử dụng data:text/json và thay đổi các tập tin kết thúc để .json

Answer 5

Tôi cũng đã muốn lưu văn bản lưu trữ địa phương của tôi vào một tập tin để tải về và mã hoạt động trên máy tính để bàn cho Safari, Chrome và Firefox trên Mac. Tuy nhiên, tôi nghĩ rằng không thể trong iOS để lưu Blob() ở bất kỳ đâu với Chrome hoặc Firefox. Nó hoạt động, đủ thú vị trong Safari. Ví dụ: tôi có thể lưu tệp văn bản vào ứng dụng Wunderlist của mình. Dưới đây là liên kết repo của tôi trên Github: The Cat Whisperer on Github gh-pages

Đây là đoạn mã 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);