Как определить поддержку 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 и изучение более ранних подходов.

Полезные материалы

1. Web Storage API – Web APIs | MDN – Основные сведения о работе Web Storage API.
2. "localStorage" | Can I use... Support tables for HTML5, CSS3, etc – Таблица поддержки localStorage в различных браузерах.
3. HTML Web Storage API – Информация о HTML5 Web Storage и различные способы использования API.
4. web.dev – Информация о современных техниках разработки и внедрения веб-приложений.
5. Detecting HTML5 Features – Dive Into HTML5 – Разнообразные стратегии и техники обнаружения возможностей браузера для хранения данных.
6. javascript – How to detect if browser supports HTML5 Local Storage – Stack Overflow – Обсуждение различных методов обнаружения поддержки Local Storage на Stack Overflow.
7. a brief history of detecting local storage · Github – История эволюции способов обнаружения локального хранения от Пола Ириша.