Персонализация интерфейса через localStorage: пошаговое руководство

function saveUserSettings(settingName, settingValue) {
try {
localStorage.setItem(settingName, settingValue);
return true;
} catch (error) {
console.error('Failed to save settings:', error);
return false;
}
}

// Пример использования:
saveUserSettings('theme', 'dark');
saveUserSettings('fontSize', '16px');

function getUserSetting(settingName, defaultValue) {
try {
const value = localStorage.getItem(settingName);
return value !== null ? value : defaultValue;
} catch (error) {
console.error('Failed to read settings:', error);
return defaultValue;
}
}

// Пример использования:
const currentTheme = getUserSetting('theme', 'light');
const fontSize = getUserSetting('fontSize', '14px');

document.addEventListener('DOMContentLoaded', function() {
// Применяем тему
const theme = getUserSetting('theme', 'light');
document.body.setAttribute('data-theme', theme);

// Применяем размер шрифта
const fontSize = getUserSetting('fontSize', '14px');
document.documentElement.style.fontSize = fontSize;

// Обновляем элементы управления настройками
const themeSelector = document.getElementById('theme-selector');
if (themeSelector) {
themeSelector.value = theme;
}
});

document.getElementById('theme-selector').addEventListener('change', function(e) {
const selectedTheme = e.target.value;
document.body.setAttribute('data-theme', selectedTheme);
saveUserSettings('theme', selectedTheme);
});

document.getElementById('font-size-slider').addEventListener('input', function(e) {
const newSize = e.target.value + 'px';
document.documentElement.style.fontSize = newSize;
saveUserSettings('fontSize', newSize);
});

function isLocalStorageAvailable() {
try {
const test = 'test';
localStorage.setItem(test, test);
localStorage.removeItem(test);
return true;
} catch (e) {
return false;
}
}

if (!isLocalStorageAvailable()) {
console.warn('LocalStorage is not available. Settings will not be saved.');
// Предоставьте альтернативу или уведомите пользователя
}

// Сохранение объекта
function saveObject(key, object) {
try {
const serializedObject = JSON.stringify(object);
localStorage.setItem(key, serializedObject);
return true;
} catch (error) {
console.error('Failed to save object:', error);
return false;
}
}

// Получение объекта
function getObject(key, defaultValue = null) {
try {
const serialized = localStorage.getItem(key);
if (serialized === null) return defaultValue;
return JSON.parse(serialized);
} catch (error) {
console.error('Failed to parse object:', error);
return defaultValue;
}
}

// Пример использования:
const userPreferences = {
theme: 'dark',
fontSize: '16px',
showNotifications: true,
dashboardLayout: ['widget1', 'widget3', 'widget2']
};

saveObject('userPreferences', userPreferences);

// Позже, при загрузке
const savedPreferences = getObject('userPreferences', {
theme: 'light',
fontSize: '14px',
showNotifications: false,
dashboardLayout: ['widget1', 'widget2', 'widget3']
});

// Сохранение даты
function saveDate(key, date) {
try {
localStorage.setItem(key, date.toISOString());
return true;
} catch (error) {
console.error('Failed to save date:', error);
return false;
}
}

// Получение даты
function getDate(key, defaultValue = new Date()) {
try {
const dateStr = localStorage.getItem(key);
return dateStr ? new Date(dateStr) : defaultValue;
} catch (error) {
console.error('Failed to parse date:', error);
return defaultValue;
}
}

// Пример использования:
const lastVisit = new Date();
saveDate('lastVisit', lastVisit);

// При следующем посещении
const previousVisit = getDate('lastVisit');
const daysSinceLastVisit = Math.floor((new Date() – previousVisit) / (1000 * 60 * 60 * 24));
console.log(`Welcome back! Your last visit was ${daysSinceLastVisit} days ago.`);

// Объект для хранения всех настроек интерфейса
const uiSettings = {
getSettings: function() {
return getObject('uiSettings', {
theme: 'auto', // auto, light, dark
fontSize: 'medium', // small, medium, large
reducedMotion: false,
highContrast: false,
language: 'auto' // auto, en, fr, es, ...
});
},

saveSettings: function(settings) {
return saveObject('uiSettings', settings);
},

// Получение отдельной настройки
get: function(settingName) {
const settings = this.getSettings();
return settings[settingName];
},

// Сохранение отдельной настройки
set: function(settingName, value) {
const settings = this.getSettings();
settings[settingName] = value;
return this.saveSettings(settings);
},

// Применение всех настроек интерфейса
apply: function() {
const settings = this.getSettings();

// Применяем тему
document.documentElement.setAttribute('data-theme', settings.theme);

// Применяем размер шрифта
document.documentElement.classList.remove('font-small', 'font-medium', 'font-large');
document.documentElement.classList.add(`font-${settings.fontSize}`);

// Применяем настройки доступности
document.documentElement.classList.toggle('reduced-motion', settings.reducedMotion);
document.documentElement.classList.toggle('high-contrast', settings.highContrast);

// Устанавливаем язык
if (settings.language !== 'auto') {
document.documentElement.lang = settings.language;
}
}
};

// Использование:
document.addEventListener('DOMContentLoaded', function() {
// Применяем настройки при загрузке
uiSettings.apply();

// Заполняем элементы управления текущими значениями
const themeSelector = document.getElementById('theme-selector');
if (themeSelector) {
themeSelector.value = uiSettings.get('theme');
themeSelector.addEventListener('change', function(e) {
uiSettings.set('theme', e.target.value);
uiSettings.apply();
});
}

// И так далее для других элементов управления...
});

const storageWithExpiry = {
// Сохранение с указанием срока действия (в минутах)
setItem: function(key, value, expiryMinutes) {
const now = new Date();
// Создаём объект с данными и сроком действия
const item = {
value: value,
expiry: expiryMinutes ? now.getTime() + expiryMinutes * 60000 : null
};
try {
localStorage.setItem(key, JSON.stringify(item));
return true;
} catch (error) {
console.error('Error saving to localStorage:', error);
return false;
}
},

// Получение данных с проверкой срока действия
getItem: function(key, defaultValue = null) {
try {
const itemStr = localStorage.getItem(key);
if (!itemStr) return defaultValue;

const item = JSON.parse(itemStr);
const now = new Date();

// Проверяем, не истёк ли срок действия
if (item.expiry && now.getTime() > item.expiry) {
// Срок действия истёк, удаляем запись
localStorage.removeItem(key);
return defaultValue;
}
return item.value;
} catch (error) {
console.error('Error reading from localStorage:', error);
return defaultValue;
}
},

// Удаление элемента
removeItem: function(key) {
try {
localStorage.removeItem(key);
return true;
} catch (error) {
console.error('Error removing from localStorage:', error);
return false;
}
},

// Очистка всего хранилища
clear: function() {
try {
localStorage.clear();
return true;
} catch (error) {
console.error('Error clearing localStorage:', error);
return false;
}
}
};

// Примеры использования:
// Сохранение настроек на 24 часа
storageWithExpiry.setItem('tempSettings', { theme: 'holiday', showBanner: true }, 24 * 60);

// Сохранение постоянных настроек (без срока действия)
storageWithExpiry.setItem('persistentSettings', { userId: 123, preferences: {...} });

// Получение данных
const tempSettings = storageWithExpiry.getItem('tempSettings');

const safeStorage = {
// Проверка доступности localStorage
isAvailable: function() {
try {
const test = '__test__';
localStorage.setItem(test, test);
localStorage.removeItem(test);
return true;
} catch (e) {
return false;
}
},

// Получение оставшегося места в хранилище (приблизительно)
getRemainingSpace: function() {
try {
let total = 0;
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
total += localStorage.getItem(key).length;
}
// Приблизительный размер хранилища в большинстве браузеров – 5МБ
return Math.max(0, 5 * 1024 * 1024 – total);
} catch (e) {
return 0;
}
},

// Сохранение с обработкой ошибок
setItem: function(key, value) {
if (!this.isAvailable()) {
console.warn('localStorage is not available');
return false;
}

try {
const valueStr = typeof value === 'string' ? value : JSON.stringify(value);
localStorage.setItem(key, valueStr);
return true;
} catch (error) {
// Проверяем, связана ли ошибка с превышением квоты
if (this.isQuotaExceeded(error)) {
console.warn('localStorage quota exceeded, trying to free up space');
// Пытаемся освободить место, удаляя старые записи
this.clearOldItems();
try {
// Пробуем снова после очистки
localStorage.setItem(key, typeof value === 'string' ? value : JSON.stringify(value));
return true;
} catch (e) {
console.error('Still cannot save to localStorage after cleanup');
return false;
}
}
console.error('Error saving to localStorage:', error);
return false;
}
},

// Проверка, связана ли ошибка с превышением квоты
isQuotaExceeded: function(error) {
return (error && (error.code === 22 || 
error.code === 1014 || 
error.name === 'QuotaExceededError' || 
error.name === 'NS_ERROR_DOM_QUOTA_REACHED'));
},

// Очистка старых элементов
clearOldItems: function() {
try {
// Пример: удаляем временные элементы
const keysToRemove = [];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key.startsWith('temp_')) {
keysToRemove.push(key);
}
}

keysToRemove.forEach(key => localStorage.removeItem(key));
return keysToRemove.length > 0;
} catch (e) {
console.error('Error clearing old items:', e);
return false;
}
},

// Остальные методы аналогичны предыдущим примерам
getItem: function(key, defaultValue = null) { /* ... */ },
removeItem: function(key) { /* ... */ },
clear: function() { /* ... */ }
};

// Обработчик переключения темы
function setupThemeToggle() {
const themeToggle = document.getElementById('theme-toggle');
const savedTheme = localStorage.getItem('theme') || 'light';

// Применяем сохранённую тему при загрузке
document.documentElement.setAttribute('data-theme', savedTheme);
themeToggle.checked = savedTheme === 'dark';

// Обработчик изменения
themeToggle.addEventListener('change', function() {
const newTheme = this.checked ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
});
}

// CSS для тем
/*
[data-theme="light"] {
--bg-color: #ffffff;
--text-color: #333333;
--primary-color: #4a90e2;
}

[data-theme="dark"] {
--bg-color: #222222;
--text-color: #f0f0f0;
--primary-color: #5fa8ff;
}

body {
background-color: var(--bg-color);
color: var(--text-color);
}
*/

// Класс для управления состоянием компонентов
class ComponentStateManager {
constructor(componentId, defaultState = {}) {
this.componentId = componentId;
this.defaultState = defaultState;
}

// Загружаем состояние
loadState() {
try {
const savedState = localStorage.getItem(`component_${this.componentId}`);
return savedState ? JSON.parse(savedState) : this.defaultState;
} catch (e) {
console.warn(`Error loading state for ${this.componentId}`, e);
return this.defaultState;
}
}

// Сохраняем состояние
saveState(state) {
try {
localStorage.setItem(`component_${this.componentId}`, JSON.stringify(state));
return true;
} catch (e) {
console.warn(`Error saving state for ${this.componentId}`, e);
return false;
}
}

// Обновляем часть состояния
updateState(partialState) {
const currentState = this.loadState();
const newState = { ...currentState, ...partialState };
return this.saveState(newState);
}
}

// Пример использования для аккордеона
function setupAccordion() {
const accordion = document.getElementById('faq-accordion');
const accordionManager = new ComponentStateManager('faq-accordion', {
expandedSections: [] // По умолчанию все секции свёрнуты
});

// Загружаем сохранённое состояние
const state = accordionManager.loadState();

// Настраиваем начальное состояние
const sections = accordion.querySelectorAll('.accordion-section');
sections.forEach((section, index) => {
const isExpanded = state.expandedSections.includes(index);
section.classList.toggle('expanded', isExpanded);

// Добавляем обработчик клика
section.querySelector('.accordion-header').addEventListener('click', function() {
const isNowExpanded = section.classList.toggle('expanded');

// Обновляем состояние в хранилище
const currentState = accordionManager.loadState();
let expandedSections = [...currentState.expandedSections];

if (isNowExpanded && !expandedSections.includes(index)) {
expandedSections.push(index);
} else if (!isNowExpanded) {
expandedSections = expandedSections.filter(i => i !== index);
}

accordionManager.updateState({ expandedSections });
});
});
}

const dashboardManager = {
// Загрузка настроек дашборда
loadDashboard: function() {
try {
const dashboardLayout = localStorage.getItem('dashboardLayout');
return dashboardLayout ? JSON.parse(dashboardLayout) : this.getDefaultLayout();
} catch (e) {
console.warn('Error loading dashboard layout', e);
return this.getDefaultLayout();
}
},

// Сохранение настроек дашборда
saveDashboard: function(layout) {
try {
localStorage.setItem('dashboardLayout', JSON.stringify(layout));
return true;
} catch (e) {
console.warn('Error saving dashboard layout', e);
return false;
}
},

// Получение настроек дашборда по умолчанию
getDefaultLayout: function() {
return {
widgets: [
{ id: 'widget1', position: { x: 0, y: 0 }, visible: true },
{ id: 'widget2', position: { x: 1, y: 0 }, visible: true },
{ id: 'widget3', position: { x: 0, y: 1 }, visible: true },
{ id: 'widget4', position: { x: 1, y: 1 }, visible: true }
]
};
},

// Применение настроек к интерфейсу
renderDashboard: function() {
const layout = this.loadDashboard();
const dashboard = document.getElementById('dashboard');
dashboard.innerHTML = '';

layout.widgets
.filter(widget => widget.visible)
.forEach(widget => {
const widgetElement = document.createElement('div');
widgetElement.id = widget.id;
widgetElement.className = 'dashboard-widget';
widgetElement.style.gridColumnStart = widget.position.x + 1;
widgetElement.style.gridRowStart = widget.position.y + 1;

// Добавляем содержимое виджета и элементы управления
widgetElement.innerHTML = `
<div class="widget-header">
<h3>${widget.id}</h3>
<button class="hide-widget" data-widget="${widget.id}">×</button>
</div>
<div class="widget-content">
<!-- Содержимое виджета -->
</div>
`;

dashboard.appendChild(widgetElement);
});

// Добавляем обработчики для скрытия виджетов
document.querySelectorAll('.hide-widget').forEach(button => {
button.addEventListener('click', e => {
const widgetId = e.target.getAttribute('data-widget');
this.hideWidget(widgetId);
});
});
},

// Скрытие виджета
hideWidget: function(widgetId) {
const layout = this.loadDashboard();
const widget = layout.widgets.find(w => w.id === widgetId);
if (widget) {
widget.visible = false;
this.saveDashboard(layout);
this.renderDashboard();
}
},

// Сброс настроек дашборда
resetDashboard: function() {
localStorage.removeItem('dashboardLayout');
this.renderDashboard();
}
};

// Инициализация дашборда при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
dashboardManager.renderDashboard();

// Добавляем кнопку сброса
document.getElementById('reset-dashboard').addEventListener('click', function() {
if (confirm('Вы уверены, что хотите сбросить настройки дашборда?')) {
dashboardManager.resetDashboard();
}
});
});