Lime Web Components API Documentation - v7.4.0
    Preparing search index...

    Interface UserDataRepository

    Service for storing and retrieving user-specific data that persists between sessions

    The UserDataRepository provides a key-value store for saving user preferences, UI state, component settings, and other data that should persist across browser sessions. This is useful for remembering user choices, UI customizations, and component-specific settings.

    Data is stored per user and persists on the server, so users will see their saved data regardless of which device or browser they use.

    Since UserDataRepository extends StateRepository, components can use the SelectUserData decorator to automatically re-render when user data changes.

    import {
        PlatformServiceName,
        UserDataRepository,
    } from '@limetech/lime-web-components';

    class MySettingsPanel {
        private userData: UserDataRepository;

        componentWillLoad() {
            this.userData = platform.get(PlatformServiceName.UserDataRepository);

            if (this.userData.has('theme')) {
                this.applyTheme(this.userData.get<string>('theme'));
            }
        }

        private async saveTheme(theme: string) {
            await this.userData.set('theme', theme);
            this.applyTheme(theme);
        }

        private applyTheme(theme: string) {
            document.body.dataset['theme'] = theme;
        }
    }

    import { State } from '@stencil/core';
    import {
        PlatformServiceName,
        SelectUserData,
    } from '@limetech/lime-web-components';

    class MyViewSelector {
        // Set again by the platform every time the saved view changes, so the
        // component re-renders without any subscription code of its own
        @State()
        @SelectUserData({ key: 'selectedView' })
        private selectedView: string;

        private async setView(view: string) {
            const userData = platform.get(PlatformServiceName.UserDataRepository);

            await userData.set('selectedView', view);
        }
    }

    StateRepository for subscription patterns

    interface UserDataRepository {
        get<T = any>(key: string): T;
        has(key: string): boolean;
        set<T = any>(key: string, data?: T): Promise<void>;
        subscribe(
            callback: (...args: unknown[]) => void,
            options?: StateOptions,
        ): () => void;
    }

    Hierarchy (View Summary)

    Index

    Methods

    get has set subscribe

    Methods

    • Retrieve user data stored under a specific key

      Returns the value previously saved with UserDataRepository.set.

      Type Parameters

      • T = any

        The expected type of the stored data

      Parameters

      • key: string

        The key identifying the data to retrieve

      Returns T

      The stored data, or undefined if no data exists for the key

      import { PlatformServiceName } from '@limetech/lime-web-components';

      interface UserSettings {
          notifications: boolean;
          autoSave: boolean;
      }

      const userData = platform.get(PlatformServiceName.UserDataRepository);

      const settings = userData.get<UserSettings>('settings');

      // Nothing has been saved yet the first time the user opens the component, so
      // read the values defensively
      const notificationsEnabled = settings?.notifications === true;
      const fontSize = userData.get<number>('fontSize') || 14;

    • Check if user data exists for a given key

      Use this method to determine whether data has been previously saved under a specific key before attempting to retrieve it.

      Parameters

      • key: string

        The key to check for stored data

      Returns boolean

      true if data exists under the key, false otherwise

      import { PlatformServiceName } from '@limetech/lime-web-components';

      const userData = platform.get(PlatformServiceName.UserDataRepository);

      // Offer the reset only when there is a saved layout to reset to
      const canResetLayout = userData.has('dashboardLayout');

    • Store user data under a specific key

      Saves the provided data to the server, where it will persist between sessions. The data is automatically serialized to JSON.

      To delete previously saved data, pass undefined as the data parameter.

      Type Parameters

      • T = any

        The type of data being stored

      Parameters

      • key: string

        The key under which to store the data

      • Optionaldata: T

        The data to save. Pass undefined to delete existing data

      Returns Promise<void>

      A promise that resolves when the data has been saved to the server

      An error if the request to the server fails

      import { PlatformServiceName } from '@limetech/lime-web-components';

      interface FilterSettings {
          status: string[];
          dateRange: { from: string; to: string };
      }

      const userData = platform.get(PlatformServiceName.UserDataRepository);

      await userData.set('fontSize', 16);
      await userData.set('showWelcome', false);

      const filters: FilterSettings = {
          status: ['active', 'pending'],
          dateRange: { from: '2024-01-01', to: '2024-12-31' },
      };

      await userData.set('filters', filters);

      import { PlatformServiceName } from '@limetech/lime-web-components';

      const userData = platform.get(PlatformServiceName.UserDataRepository);

      // Passing undefined as the value deletes the saved data
      await userData.set('mySettings', undefined);

      console.log(userData.has('mySettings')); // false

    • Subscribe to state changes with optional transformation and filtering.

      The subscription will immediately invoke the callback with the current state (if any), then continue to call it whenever the state changes. The map and filter options allow you to transform and selectively receive updates.

      Parameters

      • callback: (...args: unknown[]) => void

        Function called with state updates (after map/filter applied)

      • Optionaloptions: StateOptions

        Optional transformations and filters for the subscription

      Returns () => void

      Unsubscribe function - call this to stop receiving updates

      • Map functions are applied sequentially to transform the state
      • Filter functions must all return true for the callback to be invoked
      • Functions in map/filter arrays are bound to the component instance
      • Always store and call the unsubscribe function when component is destroyed
      import { PlatformServiceName } from '@limetech/lime-web-components';

      const repository = platform.get(PlatformServiceName.Application);
      const logger = platform
          .get(PlatformServiceName.Logger)
          .createLogger('my-component');

      // Basic subscription
      const unsubscribeState = repository.subscribe((state) => {
          logger.debug('State updated', { state });
      });

      // With transformations
      const unsubscribeUserName = repository.subscribe(
          (userName) => logger.debug('User', { userName }),
          { map: [(state) => state.currentUser?.fullname] }
      );

    Settings

    Member Visibility

    On This Page

    Methods