В современном быстро меняющемся мире пользователи часто выполняют одновременно несколько задач и просматривают контент в ходе коротких фрагментированных сессий. Чтобы удовлетворить их потребности, приложениям важно обеспечивать бесперебойную работу, позволяя пользователям продолжить работу с того места, на котором они остановились. Один из эффективных способов добиться этого — реализовать функцию панели «Продолжить просмотр». В этой статье мы рассмотрим несколько способов реализации этой функции в вашем приложении, а также приведем примеры кода.

Метод 1: использование локального хранилища.
Один простой подход — хранить прогресс пользователя локально, используя локальное хранилище браузера. Вот пример использования JavaScript:

// Save current progress
localStorage.setItem('continueWatching', JSON.stringify({ videoId: '123', currentTime: 150 }));
// Retrieve and resume progress
const continueWatchingData = JSON.parse(localStorage.getItem('continueWatching'));
const videoId = continueWatchingData.videoId;
const currentTime = continueWatchingData.currentTime;
// Resume playback logic

Метод 2: хранение на стороне сервера
Если вашему приложению требуется синхронизация между устройствами или несколькими пользовательскими сеансами, вы можете хранить прогресс на сервере. Вот пример использования Node.js и MongoDB:

// MongoDB schema
const mongoose = require('mongoose');
const UserSchema = new mongoose.Schema({
  continueWatching: [{ videoId: String, currentTime: Number }],
});
const UserModel = mongoose.model('User', UserSchema);
// Save current progress
const userId = '123';
const videoId = '456';
const currentTime = 150;
UserModel.updateOne(
  { _id: userId },
  { $push: { continueWatching: { videoId, currentTime } } },
  { upsert: true }
);
// Retrieve and resume progress
const user = await UserModel.findById(userId);
const continueWatchingData = user.continueWatching.find(item => item.videoId === '456');
const currentTime = continueWatchingData.currentTime;
// Resume playback logic

Метод 3: использование файлов cookie.
Другой вариант — сохранять прогресс в файлах cookie, что может быть полезно для небольших приложений или когда вы хотите сохранять состояние на нескольких страницах. Вот пример использования JavaScript:

// Save current progress
document.cookie = `continueWatching=${JSON.stringify({ videoId: '123', currentTime: 150 })}`;
// Retrieve and resume progress
const cookies = document.cookie.split('; ');
const continueWatchingCookie = cookies.find(cookie => cookie.startsWith('continueWatching='));
const continueWatchingData = JSON.parse(continueWatchingCookie.split('=')[1]);
const videoId = continueWatchingData.videoId;
const currentTime = continueWatchingData.currentTime;
// Resume playback logic

Внедрение панели «Продолжить просмотр» в вашем приложении может значительно улучшить взаимодействие с пользователем и побудить пользователей чаще взаимодействовать с вашим контентом. Используя такие методы, как локальное хранилище, серверное хранилище или файлы cookie, вы можете гарантировать, что пользователи смогут легко продолжить с того места, на котором они остановились. Выберите метод, который лучше всего соответствует потребностям вашего приложения и повышает удовлетворенность пользователей.