HTML API

В браузере есть два API localStorage: localStorage и sessionStorage, оба существуют в объекте window. localStorage соответствует window.localStorage, а sessionStorage соответствует window.sessionStorage.

Основное различие между localStorage и sessionStorage заключается в их времени жизни.

Базовое использование

  • Термин здесьScopeозначает: как изолировать localStorage между разными страницами (нельзя прочитать localStorage Tencent на странице Baidu, ха-ха).

  • localStorageЕсли используются одинаковый протокол, одинаковое имя хоста и одинаковый порт, можно читать/изменять одни и те же данные localStorage.

  • sessionStorageСравнениеlocalStorageСтрого говоря, помимо протокола, имени хоста и порта, также требуется находиться в одном и том жеwindow(то есть в одной вкладке браузера).

Время жизни

localStorageТеоретически он действителен бессрочно, то есть не исчезнет, если его активно не очистить. Даже если сохранённые данные превышают указанный браузером размер, он не очистит старые данные, а только выдаст ошибку. Однако учтите, что в браузерах мобильных устройств или различныхNative AppиспользуетсяWebViewв,localStorageон ненадёжен и может быть очищен по различным причинам (например, при выходе из приложения, переключении сети, нехватке памяти и т. д.).
sessionStorageЕго время жизни, как следует из названия, похоже наsessionсессию. Как только браузер (включая вкладки браузера) будет закрыт, оно будет очищено. Потому чтоsessionStorageвремя жизни sessionStorage слишком короткое, его сценарии применения очень ограничены. Однако, с другой стороны, оно менее подвержено исключениям и относительно надёжно.

Структура данных

localStorage — это стандартный тип данных ключ-значение (KV). Он прост, но его также легко расширять. Пока объект, который нужно сохранить в localStorage, преобразуется в строку каким-либо способом кодирования, его можно легко поддерживать. Например: преобразование объекта в строку JSON позволяет хранить объекты; преобразование изображения в DataUrl (base64) позволяет хранить изображения. Кроме того, для типов данных ключ-значение довольно важна особенность «ключи уникальны». Если повторно присвоить значение с тем же ключом, оно перезапишет предыдущее значение.

Время истечения

К сожалению, localStorage изначально не поддерживает установку времени истечения. Если вы хотите его задать, вам придётся самостоятельно реализовать слой логики:

function set(key,value){ var curtime = new Date().getTime();//Получить текущее время localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//Преобразовать в последовательность строк JSON } function get(key,exp)//exp — это заданное время истечения { var val = localStorage.getItem(key);//Получить сохранённый элемент var dataobj = JSON.parse(val);//Разобрать объект JSON if(new Date().getTime() - dataobj.time > exp)//Если текущее время - время, установленное при создании сохранённого элемента > время истечения { console.log("expires");//Вывести сообщение, что срок действия истёк } else{ console.log("val="+dataobj.val); } }

Ограничение ёмкости

В настоящее время в отрасли его практически единогласно устанавливают на 5M, что уже намного больше, чем 4K у cookies. Используйте его экономно, молодой человек.

Ограничение по домену

Из-за политики безопасности браузера localStorage не может работать между доменами, и поддомен не может наследовать данные localStorage родительского домена. Это существенно отличается от cookies.

Обработка исключений

localStorage не полностью стабилен в текущей среде браузера, и могут возникать различные ошибки. Необходимо тщательно продумать обработку исключений. Лично я считаю, что localStorage — это всего лишь метод оптимизации для локализации ресурсов. Удобство использования программы не должно снижаться из-за использования localStorage. Я решительно против обработки исключений, которая лишь выводит некоторые сообщения об ошибках в консоль. Для обработки исключений localStorage обычно используетсяtry/catchдля перехвата/обработки исключений.

Как проверить, поддерживает ли текущий браузер пользователя localStorage

Сейчас распространённая практика — проверятьwindow.localStorageпроверить, существует ли она.try/catchВ структуре,set/getэлемент тестовых данных используется для проверки, возникает ли исключение, чтобы определить, поддерживает ли браузер localStorage. Конечно, не забудьте удалить тестовые данные после тестирования.

Совместимость с браузерами

Характеристика Chrome Firefox Internet Explorer Opera Safari Android Opera Mobile Safari Mobile
localStorage 4 3.5 8 10.50 4 2.1 11 iOS 3.2
sessionStorage 5 2 8 10.50 4 2.1 11 iOS 3.2

Как отлаживать

В инструментах разработчика Chrome,Resources - Local Storageпанель, иResources - Session Storageна панели вы можете увидеть данные localStorage для текущего домена.

Невозможно многократно вызывать setItem() на устройствах iOS.

Кроме того, на iPhone/iPad иногда при вызове setItem() возникает странная ошибка QUOTA_EXCEEDED_ERR. В этом случае, как правило, вызов removeItem() перед setItem() решает эту проблему.

Рекомендуемые плагины

Справочные статьи

Оригинальная ссылка: https://segmentfault.com/a/1190000004121465