表单字段选项缓存：如何保持缓存数据时效性及最佳实践

Hey there! Let's tackle this caching challenge for your Selectize-powered LAMP form—keeping those options cached while making sure they stay fresh is totally doable with a mix of frontend and backend strategies. I’ve worked through similar setups before, so here’s what I recommend:

Since your fields mix predefined values and user-generated history, we’ll split caching into frontend (for user-specific data) and backend (for global predefined options) to keep things efficient.

Frontend (Browser) Caching #

User-specific input history belongs in the browser to reduce server load and keep data tied to the user’s session/device:

• Use localStorage for persistent history (stays even after the browser closes) or sessionStorage for temporary, tab-specific history.
• Save new custom options to storage when users create them via Selectize’s create callback:

  // Helper to save custom options to localStorage
  function saveCustomSelectizeOption(fieldId, optionText) {
    const cacheKey = `selectize_history_${fieldId}`;
    let savedOptions = JSON.parse(localStorage.getItem(cacheKey)) || [];
    
    // Avoid duplicates
    if (!savedOptions.includes(optionText)) {
      savedOptions.push(optionText);
      localStorage.setItem(cacheKey, JSON.stringify(savedOptions));
    }
  }
  
  // Initialize Selectize with merged options
  $(document).ready(() => {
    const fieldId = "your-selectize-field";
    const predefinedOptions = <?php echo json_encode(getPredefinedOptions($fieldId)); ?>;
    const userHistory = JSON.parse(localStorage.getItem(`selectize_history_${fieldId}`)) || [];
  
    $(`#${fieldId}`).selectize({
      options: [...predefinedOptions, ...userHistory],
      create: (input) => {
        saveCustomSelectizeOption(fieldId, input);
        return { value: input, text: input };
      }
    });
  });
  

Backend (LAMP) Caching #

Predefined options should be cached on the server to avoid repeated database queries:

• Use APCu (in-memory caching for single-server setups) or Redis/Memcached if you’re running a distributed LAMP stack. Here’s an APCu example:

  function getPredefinedOptions(string $fieldId): array {
    $cacheKey = "predefined_options_{$fieldId}";
    $ttl = 3600; // Cache for 1 hour (adjust based on how often options change)
  
    // Check cache first
    if (apcu_exists($cacheKey)) {
      return apcu_fetch($cacheKey);
    }
  
    // Fetch fresh options from database
    $stmt = $pdo->prepare("SELECT value, text FROM predefined_options WHERE field_id = ?");
    $stmt->execute([$fieldId]);
    $options = $stmt->fetchAll(PDO::FETCH_ASSOC);
  
    // Store in cache
    apcu_store($cacheKey, $options, $ttl);
    return $options;
  }
  

Caching is useless if the data is stale—here’s how to keep options up-to-date:

Explicit Cache Invalidation #

• Whenever an admin updates predefined options (e.g., adds/edits a value), immediately delete the corresponding cache key:

  function updatePredefinedOption(string $fieldId): void {
    // Perform database update logic here...
    
    // Clear the cache to force fresh fetch next time
    apcu_delete("predefined_options_{$fieldId}");
  }
  

• For user history, add an optional "Clear My Input History" button in the form to let users reset their cached options if needed.

Frontend Sync Check #

Periodically verify that frontend-cached predefined options match the latest backend data. Add a last-modified timestamp to your backend response:

// Backend endpoint to fetch fresh options + timestamp
header("Content-Type: application/json");
$fieldId = $_GET['field_id'];
$options = getPredefinedOptions($fieldId);
$lastModified = apcu_fetch("predefined_options_{$fieldId}_last_modified") ?? time();

echo json_encode([
  "options" => $options,
  "lastModified" => $lastModified
]);

// Frontend: Check for updates on form load
$(document).ready(() => {
  const fieldId = "your-selectize-field";
  const cacheKey = `predefined_options_${fieldId}`;
  const timestampKey = `${cacheKey}_last_modified`;

  $.get(`/get-predefined-options.php?field_id=${fieldId}`, (data) => {
    const cachedTimestamp = localStorage.getItem(timestampKey);
    
    // Update cache if backend has newer data
    if (!cachedTimestamp || data.lastModified > cachedTimestamp) {
      localStorage.setItem(cacheKey, JSON.stringify(data.options));
      localStorage.setItem(timestampKey, data.lastModified);
    }

    // Merge with user history and initialize Selectize
    const userHistory = JSON.parse(localStorage.getItem(`selectize_history_${fieldId}`)) || [];
    $(`#${fieldId}`).selectize({
      options: [...data.options, ...userHistory],
      create: (input) => {
        saveCustomSelectizeOption(fieldId, input);
        return { value: input, text: input };
      }
    });
  });
});

• Keep User Data Client-Side: Avoid storing user-specific input history on the backend unless required for cross-device sync—it’s unnecessary and raises privacy concerns.
• Session Storage for Temporary Data: If you need to share user options across tabs in the same session, use sessionStorage instead of localStorage (clears when the browser closes).
• Index Database Queries: Make sure your predefined_options table has an index on the field_id column to speed up fresh fetches when cache is invalidated.
• Handle Disabled LocalStorage: Add a fallback for users who have localStorage disabled—fetch user history from the backend (stored in PHP sessions) if needed.

• Test cache invalidation: Update a predefined option and confirm the form loads the new value immediately.
• Avoid duplicate options: Add logic to check for matches between user history and predefined options before merging them in Selectize.
• Document your cache keys and TTL values so your team understands how the system works.

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