Great question—this is a common headache when browsers block third-party cookies (like Chrome’s default settings in some scenarios), which can break forms relying on sessionStorage. Let’s break down solutions to both your problems: proper error detection, and a fallback to keep forms functional.

1. Properly Detect SessionStorage Availability #

Your current check (if(!sessionStorage)) doesn’t work because the sessionStorage object still exists—accessing it just throws a DOMException. The correct approach is to attempt to use it and catch any errors:

function checkSessionStorage() {
  try {
    // Test with a dummy key to avoid cluttering actual storage
    const testKey = '__temp_session_test__';
    window.sessionStorage.setItem(testKey, 'test');
    window.sessionStorage.removeItem(testKey);
    return { available: true };
  } catch (error) {
    let errorMessage = "Session storage is unavailable. We'll use an alternative to keep your form working.";
    
    // Target the specific access-denied DOMException
    if (error instanceof DOMException && (
      error.name === 'SecurityError' || 
      error.message.includes('Access is denied')
    )) {
      errorMessage = "Your browser's security settings are blocking session storage. To enable full functionality, adjust your cookies settings (see instructions below).";
    }
    
    return { available: false, message: errorMessage };
  }
}

How to Use This: #

const storageStatus = checkSessionStorage();

if (!storageStatus.available) {
  // Show a user-friendly message (replace alert with an in-page notification for better UX)
  alert(storageStatus.message);
}

2. Fallback Solution to Prevent Form Crashes #

To keep your form working even when sessionStorage is blocked, create an in-memory fallback storage that mirrors the sessionStorage API. This way, your form code can use the same methods (setItem, getItem, etc.) without changes:

// Fallback storage that mimics sessionStorage's behavior
const fallbackStorage = {
  _data: {},
  setItem(key, value) {
    this._data[key] = String(value); // Match sessionStorage's string-only storage rule
  },
  getItem(key) {
    return this._data[key] || null;
  },
  removeItem(key) {
    delete this._data[key];
  },
  clear() {
    this._data = {};
  }
};

// Pick the storage method based on availability
const storage = checkSessionStorage().available ? window.sessionStorage : fallbackStorage;

Example Form Usage: #

Replace direct sessionStorage calls with the storage variable everywhere:

// Save form input
storage.setItem('user_email', document.getElementById('email').value);

// Retrieve saved input on page load
document.getElementById('email').value = storage.getItem('user_email') || '';

Note: The fallback won’t persist across page reloads, but it will keep your form functional during the current browser session—no more crashes!

3. Guide to Enable SessionStorage in Chrome #

If users want to restore full functionality, here’s how to adjust their settings:

• Open Chrome, click the three-dot menu (top-right) → Settings.
• Navigate to Privacy and security → Cookies and other site data.
• Under "General settings", either:
  • Select Allow all cookies (simplest option), or
  • Choose Block third-party cookies in Incognito instead of the stricter Block third-party cookies.
• For site-specific access:
  1. Visit your website, click the padlock icon in the address bar.
  2. Select Site settings → Under "Cookies", set to Allow.
• Refresh the page, and sessionStorage should work normally.

4. Updated Test Code #

Here’s your original test code modified with proper detection and fallback:

function checkSessionStorage() {
  try {
    const testKey = '__temp_session_test__';
    window.sessionStorage.setItem(testKey, 'test');
    window.sessionStorage.removeItem(testKey);
    return { available: true };
  } catch (error) {
    let message = "Session storage is unavailable. Using fallback method.";
    if (error instanceof DOMException && error.name === 'SecurityError') {
      message = "Browser settings are blocking session storage. Adjust cookies settings for full functionality.";
    }
    return { available: false, message: message };
  }
}

const storageStatus = checkSessionStorage();
alert(storageStatus.message);

const storage = storageStatus.available ? window.sessionStorage : {
  _data: {},
  setItem(k, v) { this._data[k] = v; },
  getItem(k) { return this._data[k] || null; }
};

// Test storage functionality
storage.setItem("name", "John Smith");
alert("Hi, " + storage.getItem("name"));

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