Практические заметки: IndexedDB — это не просто хранилище в браузере: как его использовать
Пошаговое руководство по практическим заметкам: IndexedDB — это не просто хранилище в браузере: как создавать контракты, проверки и готовые блоки кода для команд, использующих эту модель.
В этом руководстве пошагово показан путь от сырьевых материалов до готовой системы для проекта «IndexedDB — это не просто хранилище в браузере: как создавать веб-приложения, ориентированные на работу в офлайн-режиме». Основное внимание уделяется практическим шагам, четкой проверке состояния и коду, который можно просто скопировать в репозиторий без необходимости догадываться о его назначении. На этапе обзора необходимо определить входные данные, ответственного за выполнение шага и критерии завершения перед внесением изменений в код. Сотрудники должны иметь возможность перезапустить шаг, исходя из известной точки контроля, без необходимости угадывать скрытое состояние системы. Лучше использовать небольшие, тестируемые единицы кода вместо обширных скриптов. При сбое шага причина должна быть связана с конкретной функцией, а не с запутанной цепочкой операций.
localStorage уже недостаточно
При работе над этапом, когда localStorage становится недостаточным, сначала запишите контракт: необходимые входные данные, сигнал о успехе и что происходит при частичной неудаче. Такой чек-лист поможет сохранять честность при последующих изменениях кода. Рассматривайте этот этап как контракт между входными данными и проверенными выходными результатами. Дайте названия элементам, определите критерии успеха и не допускайте беззвучного частичного выполнения задачи. Измеряйте точность воспроизведения ответов на фиксированном наборе вопросов перед настройкой подсказок. Частая смена подсказок редко помогает улучшить качество поиска.
localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
localStorage.setItem(
"user",
JSON.stringify(user)
);
const user = JSON.parse(
localStorage.getItem("user")
);
50,000 products
10,000 orders
Thousands of customer records
Offline mutations
Synchronization metadata
IndexedDB — это база данных внутри браузера
При работе над этапом «IndexedDB — это база данных» сначала запишите условия использования: необходимые параметры ввода, сигнал о успешном выполнении и последствия частичной неудачи. Такой список поможет избежать ошибок при последующих изменениях кода. Рядом с функциональными результатами записывайте время выполнения операций, а также стоимость токенов или запросов. Отслеживание затрат с самого начала предотвращает неожиданные расходы при переходе от демо-среды к общедоступным средам. Перед настройкой вопросов измерьте эффективность поиска на фиксированном наборе вопросов. Частая смена формулировок вопросов редко помогает улучшить качество поиска.
Web Application
│
▼
IndexedDB
│
├── Users
├── Products
├── Orders
├── Messages
└── Pending Sync
На этапе изучения основных концепций сначала запишите условия работы системы: необходимые входные данные, сигнал о успешном выполнении и действия при частичной неудаче. Такой список помогает сохранять честность при последующих изменениях кода. Храните конфигурацию отдельно от кода приложения. Файлы с настройками, хранилища секретов и флаги функций должны находиться в одном месте, чтобы операторы могли их проверять, не читая весь код. Измеряйте уровень точности на фиксированном наборе вопросов перед настройкой подсказок. Частая смена подсказок редко помогает улучшить качество поиска. На этапе изучения основных концепций сначала запишите условия работы системы: необходимые входные данные, сигнал о успешном выполнении и действия при частичной неудаче. Такой список помогает сохранять честность при последующих изменениях кода. Предпочитайте небольшие, тестируемые единицы кода большим скриптам. Если какой-то шаг не сработает, проблема должна быть связана с конкретной функцией, а не с запутанной цепочкой операций.
Этап работы с базой данных наилучшим образом функционирует, когда его рассматривают как измеримую среду. Соберите один идеальный пример работы, один случай сбоя и запись о откате перед расширением объёма работ. Рассматривайте этот этап как контракт между входными данными и проверенными результатами. Дайте названия создаваемым элементам, определите критерии успеха и не соглашайтесь на молчаливое частичное выполнение задачи. Разделяйте политику разбиения данных на части и политику их извлечения. Изменение одной из них не должно приводить к переписыванию другой при изменении показателей качества.
my-app-db
Хранилище объектов
Этап работы с Хранилищем объектов наилучшим образом функционирует, если рассматривать его как измеримую среду. Соберите один идеальный пример работы, один случай сбоя и записку о возврате к предыдущему состоянию перед расширением объема работ. Записывайте временные показатели, а также стоимость токенов или запросов рядом с функциональными результатами. Отслеживание затрат на раннем этапе предотвращает неожиданные счета при переходе от демо-среды к общедоступным средам. Разделяйте политику разбиения данных на части и политику их извлечения. Изменение одной из них не должно приводить к необходимости переписывания другой при изменении показателей качества.
users
orders
products
Key
Этап Key работает наилучшим образом, когда рассматривается как измеримая структура. Соберите один идеальный пример работы, один случай сбоя и запись о возврате к предыдущему состоянию перед расширением объёма работ. Храните конфигурацию вне кода приложения. Файлы среды, хранилища секретов и флаги функций должны находиться в одном месте, чтобы операторы могли их проверять, не читая весь код. Разделяйте политику разбиения на части и политику получения данных. Изменение одной из них не должно приводить к переписыванию другой при изменении показателей качества. Этап Key работает наилучшим образом, когда рассматривается как измеримая структура. Соберите один идеальный пример работы, один случай сбоя и запись о возврате к предыдущему состоянию перед расширением объёма работ. Предпочитайте небольшие, тестируемые единицы кода вместо обширных скриптов. Когда какой-либо шаг срабатывает некорректно, причина сбоя должна указывать на конкретную ответственность, а не на запутанную цепочку операций.
user_123
order_456
Индекс
На этапе индексации необходимо заранее определить входные данные, ответственного за выполнение шага и критерии завершения перед внесением изменений в код. Операторы должны иметь возможность перезапустить шаг с известной точки контроля, не пытаясь угадать скрытое состояние. Рассматривайте этот этап как контракт между входными данными и проверенными выходными результатами. Укажите названия элементов, определите критерии успеха и не допускайте молчаливого частичного завершения работы. Цитируйте те фрагменты, которые действительно легли в основу ответа. Без цитат операторы не смогут отличить галлюцинации от пробелов в процессе индексации.
orders
├── id
├── customerId
├── status
└── createdAt
customerId
Транзакция
На этапе транзакции необходимо определить входные данные, ответственного за выполнение шага и критерии завершения перед изменением кода. Операторы должны иметь возможность перезапустить шаг, исходя из известной точки контроля, без необходимости угадывания скрытого состояния. Регистрируйте время выполнения и стоимость токенов или запросов рядом с функциональными результатами. Отображение стоимости заранее предотвращает неожиданные счета при переходе с демо-среды в общедоступные среды. Указывайте конкретные фрагменты текста, на которых основан ответ. Без цитат операторы не смогут отличить галлюцинации от пробелов в индексации.
Простой пример
На этапе «Простой пример» необходимо определить входные данные, ответственного за выполнение шага и критерии завершения перед изменением кода. Операторы должны иметь возможность перезапустить шаг с известной точки контроля, не догадываясь о скрытом состоянии. Конфигурацию следует хранить отдельно от кода приложения. Файлы среды, хранилища секретов и флаги функций должны находиться в одном месте, чтобы операторы могли их проверять, не читая весь код. Указывайте те участки текста, которые легли в основу ответа. Без цитат операторы не смогут отличить галлюцинации от проблем с индексацией. На этапе «Простой пример» необходимо определить входные данные, ответственного за выполнение шага и критерии завершения перед изменением кода. Операторы должны иметь возможность перезапустить шаг с известной точки контроля, не догадываясь о скрытом состоянии. Лучше использовать небольшие, тестируемые единицы кода вместо обширных скриптов. При сбое шага он должен указывать на конкретную проблему, а не на сложную структуру обработки данных.
const request = indexedDB.open("MyAppDB", 1);
request.onupgradeneeded = () => {
const db = request.result; db.createObjectStore("users", {
keyPath: "id"
});
};request.onsuccess = () => {
const db = request.result; console.log("Database opened");
};
const transaction = db.transaction(
"users",
"readwrite"
);
const store = transaction.objectStore("users");store.put({
id: "user_123",
name: "Alex",
email: "alex@example.com"
});
const transaction = db.transaction(
"users",
"readonly"
);
const store = transaction.objectStore("users");const request = store.get("user_123");request.onsuccess = () => {
console.log(request.result);
};
Почему важны индексы
На этапе «Почему важны индексы» сначала запишите контракт: необходимые входные данные, сигнал успешного выполнения и последствия частичной неудачи. Такой список помогает сохранять честность при последующих изменениях кода. Рассматривайте этот этап как контракт между входными данными и проверенными выходными результатами. Укажите названия элементов, определите критерии успеха и не допускайте безответственного частичного выполнения задачи. Измеряйте степень воспроизводимости ответов на фиксированном наборе вопросов перед настройкой подсказок. Частая смена подсказок редко помогает улучшить качество поиска.
100,000 orders
All orders for customer_123
orders
│
├── Primary Key: id
│
└── Index: customerId
customerId = customer_123
│
▼
Index
│
▼
matching orders
Транзакции важнее, чем кажутся
На этапе «Транзакции важнее, чем кажутся» сначала запишите условия контракта: необходимые входные данные, сигнал о успешном выполнении и действия при частичной неудаче. Такой список помогает избегать ошибок при последующих изменениях кода. Рядом с функциональными результатами записывайте время выполнения и стоимость токенов или запросов. Отслеживание затрат с самого начала предотвращает неожиданные расходы при переходе с демо-среды в общедоступные среды. Перед настройкой подсказок измерьте точность воспроизведения ответов на фиксированный набор вопросов. Частая смена подсказок редко помогает улучшить качество поиска.
Transaction
│
├── Create Order
├── Create Order Items
└── Create Sync Job
│
▼
COMMIT
ROLLBACK
IndexedDB обеспечивает архитектуру, ориентированную на работу в автономном режиме
При работе над этапом внедрения архитектуры IndexedDB, ориентированной на работу в автономном режиме, сначала запишите условия работы: необходимые входные данные, сигнал о успешном выполнении и действия при частичной неудаче. Такой список поможет сохранять честность последующих изменений в коде. Храните конфигурацию отдельно от кода приложения. Файлы с настройками окружения, хранилища секретов и флаги функций должны находиться в одном месте, чтобы операторы могли их проверять, не читая весь код. Измеряйте точность воспроизведения ответов на фиксированном наборе вопросов перед настройкой подсказок. Частая смена подсказок редко помогает улучшить качество поиска. При работе над этапом внедрения архитектуры IndexedDB, ориентированной на работу в автономном режиме, сначала запишите условия работы: необходимые входные данные, сигнал о успешном выполнении и действия при частичной неудаче. Такой список поможет сохранять честность последующих изменений в коде. Воздерживайтесь от использования обширных скриптов в пользу небольших, тестируемых единиц кода. Если какой-то шаг не сработает, причина должна быть связана с конкретной функцией, а не с запутанной цепочкой операций.
No Internet
↓
Application stops working
┌──────────────┐
│ Web App │
└──────┬───────┘
│
┌──────▼───────┐
│ IndexedDB │
└──────┬───────┘
│
┌──────▼───────┐
│ Sync Engine │
└──────┬───────┘
│
Internet?
/ \
No Yes
│ │
▼ ▼
Stay API
Local │
▼
Server
Шаблон «Outbox» в браузере
Шаблон «Outbox» на данном этапе работает наилучшим образом, когда его рассматривают как измеримую основу. Соберите один идеальный пример работы, один случай сбоя и записку о возврате к предыдущему состоянию перед расширением объёма работ. Рассматривайте этот этап как контракт между входными данными и проверенными выходными результатами. Дайте названия всем элементам, определите критерии успеха и не допускайте молчаливого частичного выполнения задач. Разделяйте политику разбиения данных на части и политику их извлечения. Изменение одной из них не должно приводить к переписыванию другой при изменении показателей качества.
orders
outbox
{
id: "event_123",
type: "ORDER_CREATED",
aggregateId: "order_456",
payload: {...},
status: "pending",
createdAt: 1724930000
}
IndexedDB
│
▼
Pending Outbox Events
│
▼
Sync Worker
│
▼
API
│
▼
Server
pending
↓
synced
Но офлайн-синхронизация создаёт новые проблемы
Этап «Но офлайн-синхронизация создаёт проблемы» работает лучше всего, если рассматривать его как измеримую основу. Сначала соберите один идеальный пример транскрипции, один случай сбоя и записку о возврате к предыдущему состоянию, прежде чем расширять объём работы. Записывайте временные показатели, а также стоимость токенов или запросов рядом с функциональными результатами. Отслеживание затрат на раннем этапе предотвращает неожиданные счёты при переходе от демо-среды к общедоступным средам. Разделяйте политику разбиения данных на части и политику их извлечения. Изменение одной из них не должно принуждать к переписыванию другой при изменении показателей качества.
Name = "John"
Name = "Jonathan"
Победа последней записи
Этап «Победа последней записи» работает наилучшим образом, когда его рассматривают как измеримую поверхность. Соберите один идеальный пример работы, один случай сбоя и записку о возврате к предыдущему состоянию перед расширением объёма работ. Храните конфигурацию вне кода приложения. Файлы среды, хранилища секретов и флаги функций должны находиться в одном месте, чтобы операторы могли их проверять, не читая весь код. Разделяйте политику разбиения на части и политику извлечения данных. Изменение одной из них не должно приводить к переписыванию другой при изменении показателей качества. Этап «Победа последней записи» работает наилучшим образом, когда его рассматривают как измеримую поверхность. Соберите один идеальный пример работы, один случай сбоя и записку о возврате к предыдущему состоянию перед расширением объёма работ. Предпочитайте небольшие, тестируемые единицы кода вместо обширных скриптов. Когда какой-либо шаг срабатывает некорректно, причина сбоя должна указывать на конкретную ответственность, а не на запутанную цепочку операций.
Победа сервера
Для этапа «Победа сервера» необходимо заранее определить входные данные, ответственного за выполнение шага и критерии завершения перед изменением кода. Операторы должны иметь возможность перезапустить шаг с известной точки контроля, не догадываясь о скрытом состоянии. Рассматривайте этот этап как контракт между входными данными и проверенными результатами. Укажите названия элементов, определите критерии успеха и не допускайте молчаливого частичного выполнения задачи. Цитируйте те фрагменты, которые фактически легли в основу ответа. Без цитат операторы не смогут отличить галлюцинации от пробелов в индексации.
Победа клиента
На этапе «Победа клиента» необходимо заранее определить входные данные, ответственного за выполнение шага и критерии завершения перед изменением кода. Операторы должны иметь возможность перезапустить шаг с известной точки контроля, не догадываясь о скрытом состоянии. Рядом с функциональными результатами следует записывать время выполнения и стоимость токенов или запросов. Отображение стоимости заранее предотвращает неожиданные счета при переходе с демо-среды в общедоступные среды. Указывайте конкретные фрагменты текста, на которых основан ответ. Без цитат операторы не смогут отличить галлюцинации от пробелов в индексации.
Слияние на уровне полей
На этапе слияния на уровне полей необходимо заранее определить входные данные, ответственного за выполнение шага и критерии завершения перед внесением изменений в код. Операторы должны иметь возможность перезапустить шаг с известной точки контроля, не догадываясь о скрытом состоянии. Конфигурацию следует хранить отдельно от кода приложения. Файлы среды, хранилища секретов и флаги функций должны находиться в одном месте, чтобы операторы могли их проверять, не читая весь кодовый граф. Указывайте те участки текста, которые легли в основу ответа. Без цитат операторы не смогут отличить галлюцинации от пробелов в индексации. На этапе слияния на уровне полей необходимо заранее определить входные данные, ответственного за выполнение шага и критерии завершения перед внесением изменений в код. Операторы должны иметь возможность перезапустить шаг с известной точки контроля, не догадываясь о скрытом состоянии. Предпочитайте небольшие, тестируемые единицы кода большим скриптам. При сбое шага он должен указывать на конкретную причину, а не на сложную структуру обработки данных.
Решение конфликтов
При работе над этапом решения конфликтов сначала запишите контракт: необходимые входные данные, сигнал успешного выполнения и действия при частичной неудаче. Такой список помогает сохранять честность при последующих изменениях кода. Рассматривайте этот этап как контракт между входными данными и проверенными выходными результатами. Укажите названия элементов, определите критерии успеха и не допускайте молчаливого частичного выполнения задачи. Оцените уровень воспроизводимости на фиксированном наборе вопросов перед настройкой подсказок. Частая смена подсказок редко помогает улучшить качество поиска.
Здесь тоже важна идемпотентность
При работе над этапом «Идемпотентность важна и здесь» сначала запишите условия использования: необходимые входные данные, сигнал о успешном выполнении и последствия частичной неудачи. Такой чек-лист поможет сохранять честность при последующих изменениях кода. Рядом с функциональными результатами записывайте время выполнения и стоимость токена или запроса. Отслеживание затрат с самого начала предотвращает неожиданные расходы при переходе с демо-среды в общедоступные среды. Перед настройкой подсказок измерьте точность воспроизведения ответов на фиксированный набор вопросов. Частая смена подсказок редко помогает улучшить качество поиска.
ORDER_CREATED
Request 1 → SUCCESS
Request 2 → SUCCESS
clientMutationId = "mutation_123"
UNIQUE(clientMutationId)
Не рассматривайте IndexedDB как базу данных вашего сервера
При работе над этапом «Не обращайтесь к IndexedDB» сначала запишите условия использования: необходимые входные данные, сигнал о успехе и действия при частичной неудаче. Такой чек-лист поможет сохранять честность последующих изменений в коде. Храните конфигурацию вне кода приложения. Файлы с настройками окружения, хранилища секретов и флаги функций должны находиться в одном месте, чтобы операторы могли их проверять, не читая весь код. Измеряйте точность воспроизведения ответов на фиксированном наборе вопросов перед настройкой подсказок. Частая смена подсказок редко помогает улучшить качество поиска. При работе над этапом «Не обращайтесь к IndexedDB» сначала запишите условия использования: необходимые входные данные, сигнал о успехе и действия при частичной неудаче. Такой чек-лист поможет сохранять честность последующих изменений в коде. Воздерживайтесь от использования обширных скриптов в пользу небольших, тестируемых единиц кода. Если какой-то шаг не сработает, причина должна быть связана с одной конкретной функцией, а не с запутанной цепочкой операций.
Server
│
PostgreSQL
│
▼
API
▲
│
Sync Layer
▲
│
IndexedDB
▲
│
Web App
Что следует хранить?
Этот этап «Что следует хранить?» работает наилучшим образом, если рассматривать его как измеримую основу. Соберите один идеальный пример записи, один случай сбоя и записку о возврате к предыдущему состоянию перед расширением объема работ. Рассматривайте этот этап как контракт между входными данными и проверенными результатами. Дайте названия создаваемым элементам, определите критерии успеха и не соглашайтесь на молчаливое частичное выполнение задачи. Разделяйте политику разбиения данных на части и политику их извлечения. Изменение одной из них не должно приводить к переписыванию другой при изменении показателей качества.
Products
Recent Orders
Customer Data
Drafts
User Preferences
Offline Mutations
Sync Metadata
Хранилище не является бесконечным
Этот этап «Хранилище не является бесконечным» работает наилучшим образом, если рассматривать его как измеримую площадку. Сначала зафиксируйте один идеальный пример работы, один случай сбоя и записку о возврате к предыдущему состоянию, прежде чем расширять объем работ. Записывайте временные показатели, а также стоимость токенов или запросов рядом с функциональными результатами. Отслеживание затрат на раннем этапе предотвращает неожиданные счета при переходе от демо-среды к общедоступным средам. Разделяйте политику разбиения данных на части и политику их извлечения. Изменение одной из них не должно принуждать к переписыванию другой при изменении показателей качества.
IndexedDB по умолчанию не является кэшем
Инструмент «IndexedDB Is Not a stage» работает наилучшим образом, когда его рассматривают как измеримую поверхность. Соберите один идеальный пример работы, один случай сбоя и запись о возврате к предыдущему состоянию перед расширением объема работ. Храните конфигурацию вне кода приложения. Файлы среды, хранилища секретов и флаги функций должны находиться в одном месте, чтобы операторы могли их проверять, не читая весь код. Разделяйте политику разбиения данных на части и политику их извлечения. Изменение одной из них не должно приводить к необходимости переписывания другой при изменении показателей качества. Инструмент «IndexedDB Is Not a stage» работает наилучшим образом, когда его рассматривают как измеримую поверхность. Соберите один идеальный пример работы, один случай сбоя и запись о возврате к предыдущему состоянию перед расширением объема работ. Предпочитайте небольшие, тестируемые единицы кода большим объемным скриптам. Когда какой-то шаг сбивается, причина сбоя должна указывать на конкретную ответственность, а не на запутанную цепочку операций.
Практическая архитектура
На этапе «Практическая архитектура» необходимо определить входные данные, ответственного за выполнение шага и критерии завершения перед изменением кода. Операторы должны иметь возможность перезапустить шаг с известной точки контроля, не догадываясь о скрытом состоянии. Рассматривайте этот этап как контракт между входными данными и проверенными выходными результатами. Укажите названия результатов работы, определите критерии успеха и не допускайте молчаливого частичного завершения задачи. Цитируйте те фрагменты, которые фактически легли в основу ответа. Без цитат операторы не смогут отличить галлюцинации от пробелов в индексации.
┌───────────────┐
│ Web Client │
└───────┬───────┘
│
┌──────────▼──────────┐
│ Application State │
└──────────┬──────────┘
│
┌──────────▼──────────┐
│ IndexedDB │
│ │
│ Products │
│ Orders │
│ Drafts │
│ Outbox │
│ Sync Metadata │
└──────────┬──────────┘
│
Sync Engine
│
┌────────▼────────┐
│ API │
└────────┬────────┘
│
┌────────▼────────┐
│ Database │
└─────────────────┘
Распространённые ошибки
На этапе распространённых ошибок необходимо определить входные данные, ответственного за выполнение шага и критерии завершения перед изменением кода. Операторы должны иметь возможность перезапустить шаг с известной точки контроля, не догадываясь о скрытом состоянии.
Ошибка 1: Использование localStorage для всего
Ошибка 2: Рассмотрение IndexedDB как постоянного источника правды
Ошибка 3: Игнорирование конфликтов
Ошибка 4: Забывание о дублированной синхронизации
Ошибка 5: Хранение всего
Ошибка 6: Разработка поддержки офлайн-режима в конце
Более важный урок
Заключительные мысли
Browser
↕
Server