локальное хранилище должно знать

внешний интерфейс браузер iOS модульный тест

HTML API

В браузере есть два API для локального хранилища:localStorageа такжеsessionStorage, который существует в объекте окна:localStorageвести перепискуwindow.localStorage,sessionStorageвести перепискуwindow.sessionStorage.localStorageа такжеsessionStorageРазница в основном в сроке службы.

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

localStorage.setItem("b","isaac");//设置b为"isaac"
var b = localStorage.getItem("b");//获取b的值,为"isaac"
var a = localStorage.key(0); // 获取第0个数据项的键名，此处即为“b”
localStorage.removeItem("b");//清除c的值
localStorage.clear();//清除当前域名下的所有localstorage数据

объем

  • здесь作用域Это относится к тому, как изолировать localStorage между разными страницами (вы не можете прочитать localStorage Tencent на странице Baidu, хахаха).
  • localStorageПока используется один и тот же протокол, одно и то же имя хоста и один и тот же порт, одни и те же данные localStorage могут быть прочитаны/изменены.
  • sessionStorageСравниватьlocalStorageЧуть строже, помимо протокола, имени хоста, порта, требуется еще и чтобы он был в одномокно(то есть вкладка браузера).

продолжительность жизни

localStorageТеоретически он постоянный, то есть не исчезнет, ​​если его активно не очистить.Даже если сохраненные данные превысят размер, указанный браузером, старые данные не будут очищены и будет сообщено только об ошибке. Однако следует отметить, что браузеры на мобильных устройствах или различныеNative AppиспользовалWebViewвнутри,localStorageВсе они ненадежны и могут быть очищены по разным причинам (например, выход из приложения, переключение сети, нехватка памяти и т. д.).sessionStorageСрок службы, как следует из названия, аналогиченsession, пока вы закроете браузер (включая вкладки браузера), он будет очищен. из-за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 файлов cookie.

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

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

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

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

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

В настоящее время общепринятой практикой является обнаружениеwindow.localStorageСуществует ли он, но некоторые браузеры имеют ошибки, хотя и «поддерживают» localstorage, в реальном процессе могут быть даже низкоуровневые ошибки, такие как невозможность setItem(). Поэтому я предлагаю, чтобыtry/catchв структуреset/getЕсть ли отклонения в тестовых данных, чтобы определить, поддерживает ли браузер локальное хранилище, конечно, не забудьте удалить тестовые данные после теста.

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

| Feature | 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|

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

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

Невозможно повторить setItem() на устройстве ios

Кроме того, иногда возникает странная ошибка QUOTA_EXCEEDED_ERR, когда setItem() установлен на iPhone/iPad.В настоящее время можно удалитьItem() перед setItem.

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

Справочная статья

Категории