CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vkontakte--vk-bridge

Bridge library for VK Mini Apps to communicate with VK clients across iOS, Android, and Web platforms

Pending
Overview
Eval results
Files

storage-data.mddocs/

Storage & Data Management

Client-side storage management for persisting application data across sessions with key-value storage operations.

Capabilities

Storage Operations

Store, retrieve, and manage persistent data on the client side.

/**
 * Set storage value for a key
 * @param props.key - Storage key identifier
 * @param props.value - Value to store (string)
 */
function send(method: 'VKWebAppStorageSet', props: {
  key: string;
  value: string;
}): Promise<{ result: true }>;

/**
 * Get storage values for specified keys
 * @param props.keys - Array of storage keys to retrieve
 */
function send(method: 'VKWebAppStorageGet', props: {
  keys: string[];
}): Promise<{
  keys: Array<{ key: string; value: string }>;
}>;

/**
 * Get list of storage keys with pagination
 * @param props.count - Number of keys to retrieve
 * @param props.offset - Offset for pagination
 */
function send(method: 'VKWebAppStorageGetKeys', props: {
  count: number;
  offset: number;
}): Promise<{
  keys: string[];
}>;

Usage Examples:

// Store user preferences
await bridge.send('VKWebAppStorageSet', {
  key: 'user_theme',
  value: 'dark'
});

await bridge.send('VKWebAppStorageSet', {
  key: 'user_settings', 
  value: JSON.stringify({
    notifications: true,
    sound: false,
    language: 'en'
  })
});

// Retrieve stored data
const settings = await bridge.send('VKWebAppStorageGet', {
  keys: ['user_theme', 'user_settings', 'last_visit']
});

settings.keys.forEach(item => {
  console.log(`${item.key}: ${item.value}`);
});

// Parse JSON data
const userSettings = settings.keys.find(item => item.key === 'user_settings');
if (userSettings) {
  const parsedSettings = JSON.parse(userSettings.value);
  console.log('User settings:', parsedSettings);
}

// Get all available keys
const allKeys = await bridge.send('VKWebAppStorageGetKeys', {
  count: 100,
  offset: 0
});

console.log('Stored keys:', allKeys.keys);

Storage Best Practices

Data Serialization

// Helper functions for storage
const storage = {
  async setObject(key: string, value: any): Promise<void> {
    await bridge.send('VKWebAppStorageSet', {
      key,
      value: JSON.stringify(value)
    });
  },

  async getObject<T>(key: string): Promise<T | null> {
    const result = await bridge.send('VKWebAppStorageGet', { keys: [key] });
    const item = result.keys.find(k => k.key === key);
    
    if (item && item.value) {
      try {
        return JSON.parse(item.value);
      } catch (error) {
        console.error('Failed to parse stored object:', error);
        return null;
      }
    }
    
    return null;
  },

  async setString(key: string, value: string): Promise<void> {
    await bridge.send('VKWebAppStorageSet', { key, value });
  },

  async getString(key: string): Promise<string | null> {
    const result = await bridge.send('VKWebAppStorageGet', { keys: [key] });
    const item = result.keys.find(k => k.key === key);
    return item ? item.value : null;
  }
};

// Usage
await storage.setObject('app_config', {
  version: '1.0.0',
  features: ['feature1', 'feature2'],
  lastUpdated: Date.now()
});

const config = await storage.getObject('app_config');
console.log('App config:', config);

Batch Operations

// Batch storage operations
async function saveBatchData(data: Record<string, any>): Promise<void> {
  const promises = Object.entries(data).map(([key, value]) =>
    bridge.send('VKWebAppStorageSet', {
      key,
      value: typeof value === 'string' ? value : JSON.stringify(value)
    })
  );
  
  await Promise.all(promises);
}

async function loadBatchData(keys: string[]): Promise<Record<string, any>> {
  const result = await bridge.send('VKWebAppStorageGet', { keys });
  const data: Record<string, any> = {};
  
  result.keys.forEach(item => {
    try {
      data[item.key] = JSON.parse(item.value);
    } catch {
      data[item.key] = item.value; // Keep as string if not JSON
    }
  });
  
  return data;
}

Install with Tessl CLI

npx tessl i tessl/npm-vkontakte--vk-bridge

docs

advertising-monetization.md

application-lifecycle.md

authentication.md

core-bridge.md

device-features.md

geolocation.md

index.md

launch-parameters.md

middleware.md

payments-commerce.md

qr-barcode-scanning.md

social-features.md

storage-data.md

ui-display.md

user-data.md

tile.json