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

// src/lib/c15t.client.ts
import { configureConsentManager, type ConsentManagerOptions } from 'c15t';
 
export const c15tConfig = {
  mode: 'offline',
  // Optional: Add callback functions for various events
  callbacks: {
    onConsentSet: (response) => {
      console.log('Consent has been saved locally');
    },
    onConsentBannerFetched: (response) => {
      console.log('Banner state retrieved:', response.data);
    },
    onConsentVerified: (response) => {
      console.log('Consent verification complete');
    },
    onError: (error, endpoint) => {
      console.error(`Error in ${endpoint}:`, error);
    }
  }
} satisfies ConsentManagerOptions;
 
export const consentManager = configureConsentManager(c15tConfig);

<script lang="ts">
  import { consentManager } from '../lib/c15t.client';
 
  // Example: Show the consent banner if needed
  let showBanner = false;
 
  consentManager.showConsentBanner().then((result) => {
    showBanner = result;
  });
</script>
 
{#if showBanner}
  <ConsentBanner />
{/if}

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
import { configureConsentManager } from 'c15t';
 
export const consentManager = configureConsentManager({
  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:

import { configureConsentManager } from 'c15t';
 
export const consentManager = configureConsentManager({
  mode: 'offline',
  storage: 'sessionStorage'
});

Memory Only

For applications where persistence isn't needed:

import { configureConsentManager } from 'c15t';
 
export const consentManager = configureConsentManager({
  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:

const options = {
  mode: import.meta.env.MODE === 'development' 
    ? 'offline' 
    : 'c15t',
  backendURL: import.meta.env.MODE === 'production'
    ? import.meta.env.VITE_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 { onMount } from 'svelte';
import { writable } from 'svelte/store';
import { configureConsentManager } from 'c15t';
 
const mode = writable<'c15t' | 'offline'>('c15t');
 
onMount(() => {
  fetch('/api/c15t/status')
    .catch(() => {
      console.warn('c15t backend unavailable, switching to offline mode');
      mode.set('offline');
    });
});
 
const options = {
  mode,
  backendURL: $mode === 'c15t' ? '/api/c15t' : undefined
};
 
export const consentManager = configureConsentManager(options);

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