如何在客户端保存JavaScript FormData()对象及表单数据？

Got it, let's walk through exactly how to save your form's text inputs and files to the client side—since files can't be stored directly in LocalStorage or cookies, we'll need separate approaches for each type of data.

一、处理文本输入数据（LocalStorage优先，Cookie备选） #

Text data is super straightforward to store locally. LocalStorage is the go-to here: it offers ~5MB of storage (way more than cookies' 4KB limit) and doesn't get sent with every HTTP request. Cookies are only useful if you need the data to be accessible to your server alongside client-side use.

1. Save text data to LocalStorage #

Add a listener to your form (or a dedicated "Save to Local" button) to capture and store text values:

// Attach to your form's submit event (or a button click)
document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault(); // Stop default form submission since we're saving locally

  // Collect text input values into an object
  const formTextData = {
    username: document.getElementById('username').value,
    email: document.getElementById('email').value,
    notes: document.getElementById('notes').value
    // Add all your text fields here
  };

  // Serialize to JSON (LocalStorage only stores strings) and save
  localStorage.setItem('savedFormText', JSON.stringify(formTextData));
  
  alert('Text data saved to local storage!');
});

2. Restore text data on page load #

Auto-fill the form when the page loads using the saved data:

window.addEventListener('load', function() {
  const savedTextData = localStorage.getItem('savedFormText');
  if (savedTextData) {
    const parsedData = JSON.parse(savedTextData);
    // Populate each text field
    document.getElementById('username').value = parsedData.username;
    document.getElementById('email').value = parsedData.email;
    document.getElementById('notes').value = parsedData.notes;
  }
});

二、处理文件输入数据（FileReader + LocalStorage/IndexedDB） #

Files can't be stored directly in LocalStorage or cookies, but we can convert them to a storable format. For small files, Base64 encoding works; for larger files, IndexedDB is far better (it's built for client-side storage of large/binary data).

1. Save small files (<1MB) to LocalStorage (Base64) #

Use FileReader to convert the file to a Base64 string, then store it with metadata like filename and type:

function saveSmallFileToLocal() {
  const fileInput = document.getElementById('fileInput');
  const selectedFile = fileInput.files[0];
  if (!selectedFile) return;

  const reader = new FileReader();
  reader.onload = function(e) {
    const fileData = {
      name: selectedFile.name,
      type: selectedFile.type,
      data: e.target.result // Base64-encoded string
    };
    localStorage.setItem('savedSmallFile', JSON.stringify(fileData));
    alert('Small file saved to local storage!');
  };
  reader.readAsDataURL(selectedFile);
}

// Restore the file (note: you can't auto-populate the file input due to browser security rules)
function loadSmallFileFromLocal() {
  const savedFile = localStorage.getItem('savedSmallFile');
  if (savedFile) {
    const parsedFile = JSON.parse(savedFile);
    // Create a download link for the saved file
    const downloadLink = document.createElement('a');
    downloadLink.href = parsedFile.data;
    downloadLink.download = parsedFile.name;
    downloadLink.textContent = `Download saved file: ${parsedFile.name}`;
    document.body.appendChild(downloadLink);
  }
}

2. Save large files to IndexedDB (recommended) #

IndexedDB supports binary data directly and has much higher storage limits (varies by browser, but often in the GB range). Here's a basic implementation:

// Initialize IndexedDB
let db;
function initFileDB() {
  const request = indexedDB.open('FormFileStorage', 1);
  
  // Create object store if DB is new/updated
  request.onupgradeneeded = function(e) {
    db = e.target.result;
    db.createObjectStore('formFiles', { keyPath: 'id' });
  };
  
  request.onsuccess = function(e) {
    db = e.target.result;
  };
}

// Save file to IndexedDB
function saveLargeFileToDB(file) {
  const transaction = db.transaction(['formFiles'], 'readwrite');
  const store = transaction.objectStore('formFiles');
  
  const fileRecord = {
    id: Date.now(), // Use timestamp as unique ID
    name: file.name,
    type: file.type,
    data: file // Store the raw File object
  };
  
  store.add(fileRecord);
  
  transaction.oncomplete = function() {
    alert('Large file saved to IndexedDB!');
  };
}

// Retrieve files from IndexedDB
function loadFilesFromDB() {
  const transaction = db.transaction(['formFiles'], 'readonly');
  const store = transaction.objectStore('formFiles');
  const request = store.getAll();
  
  request.onsuccess = function(e) {
    const savedFiles = e.target.result;
    savedFiles.forEach(file => {
      // Create download links for each file
      const fileURL = URL.createObjectURL(file.data);
      const link = document.createElement('a');
      link.href = fileURL;
      link.download = file.name;
      link.textContent = `Download ${file.name}`;
      document.body.appendChild(link);
    });
  };
}

// Initialize DB on page load
window.addEventListener('load', initFileDB);

三、 Combine text + file saving logic #

Wrap everything into a single function to save both text and files when the user triggers it:

<form id="myForm">
  <input type="text" id="username" placeholder="Username">
  <input type="email" id="email" placeholder="Email">
  <textarea id="notes" placeholder="Notes"></textarea>
  <input type="file" id="fileInput">
  <button type="button" onclick="saveFormToLocal()">Save Form Locally</button>
</form>

<script>
function saveFormToLocal() {
  // Save text data
  const formTextData = {
    username: document.getElementById('username').value,
    email: document.getElementById('email').value,
    notes: document.getElementById('notes').value
  };
  localStorage.setItem('savedFormText', JSON.stringify(formTextData));
  
  // Handle file (if selected)
  const fileInput = document.getElementById('fileInput');
  const selectedFile = fileInput.files[0];
  if (selectedFile) {
    // Use LocalStorage for small files, IndexedDB for large ones
    if (selectedFile.size < 1024 * 1024) { // <1MB
      const reader = new FileReader();
      reader.onload = function(e) {
        const fileData = {
          name: selectedFile.name,
          type: selectedFile.type,
          data: e.target.result
        };
        localStorage.setItem('savedSmallFile', JSON.stringify(fileData));
      };
      reader.readAsDataURL(selectedFile);
    } else { // >1MB
      saveLargeFileToDB(selectedFile);
    }
  }
  
  alert('Form data saved locally!');
}
</script>

Key Notes #

• Security Restriction: You can't auto-populate a <input type="file"> element with saved files (browser security rules prevent modifying file input values). Instead, provide download links or previews.
• Storage Limits: LocalStorage is limited to ~5MB; for larger files, always use IndexedDB.
• Cookies: Avoid using cookies for form data unless you specifically need the data to be sent to your server—they're too small and inefficient for this use case.

内容的提问来源于stack exchange，提问作者Ehsan Abidi