Offline Mode

The offline mode provides a simple, browser-based approach to storing user consent decisions without requiring a backend server.

Key Characteristics

• No backend required - Everything is stored locally in the browser
• Simplified setup - Get started quickly with minimal configuration
• Independence - Works without external services or APIs
• Fast implementation - Ideal for prototyping and simpler sites

Implementation

npm install @c15t/react

// lib/c15tClient.js
import { createClient } from '@c15t/react'
 
export const c15tClient = createClient({
  mode: 'offline',
})

// pages/_app.js
import { C15tProvider } from '@c15t/react'
import { c15tClient } from '../lib/c15tClient'
 
function MyApp({ Component, pageProps }) {
  return (
    <C15tProvider client={c15tClient}>
      <Component {...pageProps} />
    </C15tProvider>
  )
}
 
export default MyApp

How It Works

The offline mode implements the same interface as the standard client, but with the following differences:

1. Storage: All consent preferences are stored in the browser's localStorage using the configured key
2. Network: No network requests are made, all operations happen locally
3. Consent Banner: The banner visibility is determined by checking if a value exists in localStorage
4. Consent Verification: Always returns a successful response

Configuration Options

The offline mode accepts the following configuration options:

const options = {
  mode: 'offline',
  // Optional: Add callback functions for various events
  callbacks: {
    onConsentBannerFetched: (response) => {
      console.log('Banner state retrieved:', response.data);
    },
    onConsentSet: (response) => {
      console.log('Consent preferences saved');
    },
    onConsentVerified: (response) => {
      console.log('Consent verification complete');
    },
    onError: (error, endpoint) => {
      console.error(`Error in ${endpoint}:`, error);
    }
  }
};

Storage Mechanisms

In offline mode, consent decisions are stored in the browser using:

LocalStorage

By default, c15t uses the browser's localStorage to persist consent decisions:

// Default implementation
export const c15tClient = createClient({
  mode: 'offline',
  storage: 'localStorage' // This is the default, so can be omitted
})

SessionStorage

For session-based consent that's cleared when the browser is closed:

export const c15tClient = createClient({
  mode: 'offline',
  storage: 'sessionStorage'
})

Memory Only

For applications where persistence isn't needed:

export const c15tClient = createClient({
  mode: 'offline',
  storage: 'memory'
})

Browser Compatibility

The offline mode relies on localStorage, which is supported in all modern browsers. However, it includes fallbacks for environments where localStorage might be unavailable or restricted:

• Private browsing modes in some browsers
• Cookie-blocking browser extensions
• Browsers with storage permissions disabled

In these cases, the client will log a warning and continue functioning with defaults.

Use Cases

Development and Testing

Offline mode is perfect for development and testing environments where you don't want to set up a backend:

// Development configuration
const options = {
  mode: process.env.NODE_ENV === 'development' 
    ? 'offline' 
    : 'c15t',
  backendURL: process.env.NODE_ENV === 'production'
    ? process.env.NEXT_PUBLIC_C15T_URL
    : undefined
};

Static Sites

For static sites without backend integration, offline mode provides a simple solution:

const options = {
  mode: 'offline',
};

Fallback Mode

You can use offline mode as a fallback when the backend is unavailable:

import { useState, useEffect } from 'react';
 
function ConsentProvider({ children }) {
  const [mode, setMode] = useState('c15t');
  
  useEffect(() => {
    // Check if backend is available
    fetch('/api/c15t/status')
      .catch(() => {
        console.warn('c15t backend unavailable, switching to offline mode');
        setMode('offline');
      });
  }, []);
  
  const options = {
    mode,
    backendURL: mode === 'c15t' ? '/api/c15t' : undefined
  };
  
  return (
    <ConsentManagerProvider options={options}>
      {children}
    </ConsentManagerProvider>
  );
}

Limitations

While offline mode provides a functional consent management solution, it has some limitations:

1. No Centralized Reporting: Since all data is stored locally, you can't generate reports or analytics
2. Device-Specific: Consent preferences don't transfer between devices or browsers
3. Storage Limits: localStorage has size limitations (typically 5-10MB per domain)
4. No Server-Side Logic: Custom server-side processing of consent isn't possible

When to Use Offline Mode

Consider using offline mode when:

• You're building a prototype or MVP
• Your site doesn't have a backend
• You want the simplest possible implementation
• Cross-device synchronization isn't a requirement
• You have limited compliance needs

For more complex applications or those with stricter compliance requirements, consider Server-Based Storage instead.

Next Steps