Комментарий: Эта статья в основном представляет базовое использование LocalStorage, SessionStorage, операций по обходу, обработки исключений и т. Д. Для HTML5 Local Storage. Друзья, которые это нужно, могут ссылаться на это.
LocalStorage в API HTML5 Local Storage API совпадает с SessionStorage, разница в том, что SessionStorage очищается после закрытия страницы, в то время как LocalStorage будет сохранен все время. Давайте возьмем LocalStorage в качестве примера здесь, чтобы кратко представить локальное хранение HTML5 и привести несколько примеров для общих проблем, таких как Traversal. LocalStorage - это HTML5, хранящийся локально API. Он использует пары ключевых значений для доступа к данным, а доступные данные могут быть только строкой. Различные браузеры имеют различную поддержку для этого API, например, метод использования, максимальное пространство для хранения и т. Д.
1. Основные методы использования API LocalStorage
API Local Storage легко понять. Ниже приведены общие операции и примеры API: Установить данные: localstorage.setitem (ключ, значение); Пример:
для (var i = 0; i <10; i ++) {
localstorage.setitem (i, i);
}
Получить данные: localstorage.getitem (ключ) Получить все данные: localstorage.valueof () Пример:
localstorage.getitem (i);
}
Удалить данные: localstorage.removeitem (ключ) Пример:
localstorage.removeitem (i);
}
Очистить все данные: localstorage.clear () Получите количество локальных хранимых данных: localstorage.length Получите значение ключа NTH Data: LocalStorage.Key (n)
2. Метод значения ключа итерации за ключом
for (var i = localstorage.length-1; i> = 0; i-) {
console.log ('' + (i + 1) + 'Значение ключа данных:' + localstorage.key (i) + ', а данные:' + localstorage.getitem (localstorage.key (i)));
}
3. Испытание на ограничение размера хранения и обработка исключений
3.1 Тест на ограничение размера хранилища данных
Различные браузеры в основном имеют ограничения на локальный размер хранения HTML5. Результаты теста следующие:
Firefox 22.0> 5242875 + 5 = 5242880
Chrome 28,0> 2621435 + 5 = 2621440
Safari 5.1> 2621435 + 5 = 2621440
Opera 12.15> 5M (если она превышает его, будет появляться диалоговое окно, которое позволяет появиться в течение большего количества места)
Ссылка на код теста:
<! Doctype html>
<html>
<голова>
<Скрипт>
function log (msg) {
console.log (msg);
оповещение (MSG);
} </p> <p> var limit;
var половина = '1'; // это будет изменено на китайский
var str = половина;
var strtr;
while (1) {
пытаться {
localstorage.clear ();
str += половина;
localstorage.setitem ('cache', str);
половина = str;
} catch (ex) {
перерыв;
}
}
var base = str.length;
var off = base / 2;
var isleft = 1;
while (off) {
if (isleft) {
end = base - (off / 2);
} еще {
end = base + (off / 2);
} </p> <p> sstr = str.slice (0, end);
localstorage.clear ();
пытаться {
localstorage.setitem ('cache', str);
Limit = strtr.length;
остров = 0;
} catch (e) {
остров = 1;
} </p> <p> base = end;
off = math.floor (off / 2);
} </p> <p> log ('limit:' + limit);
</script>
</html>
3.2 Обработка исключений для хранения данных
пытаться{
localstorage.setitem (ключ, значение);
} catch (oexception) {
if (oexception.name == 'QuateExeededError') {
console.log ('локальный лимит хранения превышен!');
// Если историческая информация не важна, вы можете ее очистить, а затем установить
localstorage.clear ();
localstorage.setitem (ключ, значение);
}
}