寻求localStorage优先、降级至sessionStorage再到cookie的Vanilla JS实现方案

Great question! Handling storage fallback for cross-site search filter preferences is a common need, and your priority order makes perfect sense—prioritizing persistent localStorage first, then session-level sessionStorage, and falling back to cookies for broad compatibility. Let's build a robust, vanilla JavaScript implementation that avoids jQuery/third-party libraries, includes proper availability checks, and wraps everything in a reusable utility.

1. 先搞定存储可用性检测 #

First, we need to verify if a storage method is actually usable—not just if if the window object has it. Some browsers (like Safari in private mode) expose localStorage but throw errors when you try to write to it. Here's a helper function to check availability safely:

function isStorageAvailable(type) {
  let storage;
  try {
    storage = window[type];
    const testKey = '__storage_test__';
    storage.setItem(testKey, testKey);
    storage.removeItem(testKey);
    return true;
  } catch (e) {
    // Handle cases where storage is disabled (security restrictions, quota exceeded)
    return false;
  }
}

Why this works: We don't just check typeof window.localStorage !== 'undefined'—we actually perform a write/remove operation to confirm the storage is functional. This catches edge cases where the storage API exists but is unusable.

2. 封装统一的存储管理工具 #

Next, let's create a reusable PreferenceStorage class that automatically handles the fallback logic, and provides clean get, set, and remove methods. We'll also handle JSON serialization (since filter preferences are likely objects/arrays) and proper cookie handling for the final fallback.

class PreferenceStorage {
  constructor() {
    // Determine the highest-priority available storage
    this.storage = this.getPreferredStorage();
  }

  getPreferredStorage() {
    if (isStorageAvailable('localStorage')) {
      return 'localStorage';
    } else if (isStorageAvailable('sessionStorage')) {
      return 'sessionStorage';
    } else {
      return 'cookie';
    }
  }

  // Save a preference (supports objects/arrays via JSON)
  set(key, value, cookieExpiryDays = 7) {
    const serializedValue = JSON.stringify(value);
    switch (this.storage) {
      case 'localStorage':
        window.localStorage.setItem(key, serializedValue);
        break;
      case 'sessionStorage':
        window.sessionStorage.setItem(key, serializedValue);
        break;
      case 'cookie':
        // Set cookie with path=/ to make it available across the entire site
        const expiry = new Date();
        expiry.setTime(expiry.getTime() + (cookieExpiryDays * 24 * 60 * 60 * 1000));
        const expires = `expires=${expiry.toUTCString()}`;
        const path = 'path=/';
        document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(serializedValue)}; ${expires}; ${path}`;
        break;
    }
  }

  // Retrieve a preference (parses JSON back to original type)
  get(key) {
    let value = null;
    switch (this.storage) {
      case 'localStorage':
        value = window.localStorage.getItem(key);
        break;
      case 'sessionStorage':
        value = window.sessionStorage.getItem(key);
        break;
      case 'cookie':
        // Extract the cookie value by key
        const cookiePairs = document.cookie.split('; ');
        const targetPair = cookiePairs.find(pair => pair.startsWith(`${encodeURIComponent(key)}=`));
        if (targetPair) {
          value = decodeURIComponent(targetPair.split('=')[1]);
        }
        break;
    }

    // Parse JSON safely (handle invalid JSON cases)
    if (value) {
      try {
        return JSON.parse(value);
      } catch (e) {
        // Fallback to raw string if parsing fails
        return value;
      }
    }
    return null;
  }

  // Remove a preference
  remove(key) {
    switch (this.storage) {
      case 'localStorage':
        window.localStorage.removeItem(key);
        break;
      case 'sessionStorage':
        window.sessionStorage.removeItem(key);
        break;
      case 'cookie':
        // Set cookie expiry to past to delete it
        document.cookie = `${encodeURIComponent(key)}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
        break;
    }
  }
}

3. 使用示例 #

Now you can use this utility to manage your search filter preferences across the site with zero extra dependencies:

// Initialize the storage manager (it auto-detects the best available storage)
const filterStorage = new PreferenceStorage();

// Save your search filter preferences (e.g., a filter object)
filterStorage.set('searchFilters', {
  category: 'electronics',
  priceRange: [100, 500],
  sortBy: 'price-desc'
});

// Retrieve the filters later (on any page)
const savedFilters = filterStorage.get('searchFilters');
if (savedFilters) {
  // Apply the filters to your search UI
  console.log('Applying saved filters:', savedFilters);
}

// Remove the filters when needed
// filterStorage.remove('searchFilters');

4. 关键细节说明 #

• Cookie handling: We set path=/ to ensure the cookie is accessible across all pages of your site. We also use encodeURIComponent/decodeURIComponent to handle special characters in keys/values, which is required for valid cookie syntax.
• JSON serialization: Storing objects/arrays as JSON makes it easy to work with structured filter data, instead of manually parsing strings. We include error handling for invalid JSON to avoid crashes.
• Fallback logic: The getPreferredStorage method runs once on initialization, but if you need to recheck storage availability (e.g., if a user enables storage after page load), you can add a refreshStorage method that re-runs the detection.
• Security note: If your filter preferences include sensitive data, be aware that localStorage/sessionStorage are accessible via JS on the same origin, and cookies can be marked HttpOnly if needed—but since you're using cookies as a fallback for frontend preferences, HttpOnly isn't necessary here (it would block JS access).

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