Как определить поддержку HTML5 Local Storage в браузере
Быстрый ответ
Вы можете быстро проверить поддержку Local Storage HTML5 в браузере, используя следующий сниппет JavaScript:
if (window.localStorage) {
// Поддержка присутствует!
} else {
// К сожалению, поддержка отсутствует.
}
Этот примитивный метод представляет собой простую проверку на доступность объекта localStorage
в браузере.
Учет особенностей браузера
Несмотря на простоту предыдущего метода, он не может обеспечить полной надежности проходящей проверки из-за вариативности поведения localStorage
. Давайте осмотрим более стойкий метод проверки поддержки:
Непробиваемый подход с применением try/catch
function supportsLocalStorage() {
try {
const test = "test";
localStorage.setItem(test, test);
localStorage.removeItem(test);
return true;
} catch(e) {
return false; // Произошла ошибка, localStorage недоступен.
}
}
if (supportsLocalStorage()) {
// Все хорошо!
} else {
// К сожалению, неудача.
}
Метод с использованием try/catch
позволяет записать и затем удалить значение из localStorage
для проверки его корректной работы. Это помогает предотвратить возможные сбои, связанные с ограничениями безопасности в некоторых режимах браузера.
Особенности агрессивного тестирования
Иногда браузер может обманчиво утверждать о доступности localStorage
, хотя на деле использование этого API приводит к ошибке. Это характерно для режима инкогнито или при блокировке cookie. В таких случаях применение блока try/catch
помогает корректно обрабатывать возникающие ошибки, исключая ложно положительные результаты.
Визуализация
Простая визуализация для понимания работы HTML5 Local Storage:
🌐 Браузер = 🚪 Дверь 🗄️ Local Storage = 🔑 Ключ
'localStorage' in window ? 🔑🔓 : 🔑🚫
🔑🔓 Ключ повернулся: вы получили доступ к Local Storage.
🔑🚫 Ключ не повернулся: пора подумать об альтернативных решениях.
Расширение инструментария обнаружения
Использование Modernizr
Библиотека Modernizr позволяет эффективно определять поддержку различных возможностей веб-стандартов, включая localStorage:
if (Modernizr.localstorage) {
// Все в порядке, есть поддержка!
} else {
// Время искать альтернативные решения.
}
Настройте Modernizr так, чтобы он проверял только функции, нужные вам. Это поможет поддержать высокую производительность вашего веб-приложения.
Эксперименты с другими вариантами
Если вам необходимо краткосрочное хранение данных, вы можете рассмотреть вариант использования Session Storage. Метод проверки поддержки аналогичен методу для Local Storage:
function supportsSessionStorage() {
try {
const test = "test";
sessionStorage.setItem(test, test);
sessionStorage.removeItem(test);
return true;
} catch(e) {
return false; // Проблема, возможно, стоит сделать перерыв.
}
}
Мы используем тот же подход с конструкцией try/catch
для проверки доступности Session Storage.
Специфика режимов браузера и документа
Помните о различных режимах браузера и настройках документа, которые могут затруднить доступность Local Storage. Особенную осторожность стоит проявлять по отношению к режимам совместимости в Internet Explorer.
Изучение кода
Ознакомление с развитием методов обнаружения поможет вам лучше понять принципы работы API Local Storage и изучение более ранних подходов.
Полезные материалы
- Web Storage API – Web APIs | MDN – Основные сведения о работе Web Storage API.
- "localStorage" | Can I use... Support tables for HTML5, CSS3, etc – Таблица поддержки localStorage в различных браузерах.
- HTML Web Storage API – Информация о HTML5 Web Storage и различные способы использования API.
- web.dev – Информация о современных техниках разработки и внедрения веб-приложений.
- Detecting HTML5 Features – Dive Into HTML5 – Разнообразные стратегии и техники обнаружения возможностей браузера для хранения данных.
- javascript – How to detect if browser supports HTML5 Local Storage – Stack Overflow – Обсуждение различных методов обнаружения поддержки Local Storage на Stack Overflow.
- a brief history of detecting local storage · Github – История эволюции способов обнаружения локального хранения от Пола Ириша.