Chrome与Firefox中离线JavaScript表单数据存储位置及清除方法

Great question—this is a super common gotcha with offline form scripts and browser behavior. Let’s break down where that data might be hiding and how to wipe it completely.

Where the Form Data Is Stored #

Your scenario can stem from a few different storage mechanisms, depending on how your script is built and the browser’s default behaviors:

1. Browser Built-In Autocomplete Cache
   This is the most likely culprit if you didn’t explicitly code custom data storage. Chrome and Firefox automatically save form input values (especially for fields with a name attribute or standard types like text/email) to a local cache. For Chrome, this lives in your user profile’s Web Data database file; for Firefox, it’s the formhistory.sqlite file in your profile folder.

2. LocalStorage/SessionStorage
   If your offline script uses these Web Storage APIs:

   • localStorage: Persists even after closing the browser, so data stays until you explicitly delete it.
   • sessionStorage: Normally clears when the tab closes, but some browsers (like Chrome) restore sessionStorage when you reopen tabs via history, treating the "restored session" as a continuation of the original.

3. IndexedDB
   More complex offline scripts often use IndexedDB to store larger or structured form data. This is a persistent browser storage system, so data remains until you delete the database or clear browser-wide storage.

How to Ensure the Data Is Completely Cleared #

The approach depends on whether you’re the developer controlling the script, or a user trying to remove existing stored data.

For Developers (Controlling the Offline Script) #

• Disable Browser Autocomplete:
  Add autocomplete="off" to your form or individual fields. Note that some browsers ignore plain off for certain field types—use autocomplete="new-password" (even for non-password fields) as a more reliable fallback:

  <form autocomplete="off">
    <input type="text" name="username" autocomplete="new-password">
  </form>
  

• Clear Storage On Tab Close:
  Listen for the beforeunload event to wipe any stored form data:

  window.addEventListener('beforeunload', () => {
    // Clear specific localStorage entries for your form
    localStorage.removeItem('myFormData');
    // Wipe all sessionStorage
    sessionStorage.clear();
    // Delete an IndexedDB database used for form storage
    indexedDB.deleteDatabase('formStorageDB');
  });
  

• Reset Form On Page Restore:
  Browsers often skip the load event when restoring tabs via history. Use the pageshow event to reset the form if the session was persisted:

  window.addEventListener('pageshow', (e) => {
    if (e.persisted) {
      document.getElementById('my-offline-form').reset();
    }
  });
  

For Users (Removing Existing Stored Data) #

• Clear Browser Autocomplete & Site Storage:
  • Chrome: Go to Settings → Privacy and Security → Clear Browsing Data. Check "Autofill form data" and "Site data", then select "All time" as the time range for full cleanup.
  • Firefox: Go to Settings → Privacy & Security → History → Clear Data. Check "Form & Search History" and "Cached Web Content", then click "Clear".
• Use Private/Incognito Mode:
  Any data stored during a private session is automatically deleted when you close all private tabs—perfect for sensitive form work.
• Force Full Tab Closure:
  Instead of closing individual tabs, use Ctrl+Shift+W (Windows/Linux) or Cmd+Shift+W (Mac) to close all open tabs at once. This prevents some browsers from preserving session data for later restoration.

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