Последние учебники веб-разработки
×

HTML5 Руководство

HTML ГЛАВНАЯ HTML Введение HTML редакторы HTML базовый HTML элементы HTML Атрибуты HTML Заголовки HTML Пункты HTML Стили HTML форматирование HTML цитаты HTML Компьютерный код HTML Комментарии HTML Цвета HTML CSS HTML связи HTML Изображений HTML таблицы HTML Списки HTML Блок и строковые элементы HTML Классы HTML раскладка HTML отзывчивый HTML Iframes HTML JavaScript HTML Глава HTML юридические лица HTML Символы HTML Charset HTML URL шифровать HTML XHTML

HTML формы

HTML формы HTML Форма Элементы HTML Типы входных данных HTML Входные атрибуты

HTML5

HTML5 вступление HTML5 Поддержка HTML5 элементы HTML5 Семантика Миграция HTML5 HTML5 Гид по стилю

HTML Графика

HTML холст HTML SVG

HTML СМИ

HTML СМИ HTML видео HTML аудио HTML Плагины HTML YouTube

HTML APIs

HTML Geolocation HTML Перетаскивания HTML Локальное хранилище HTML App кэш HTML Web Workers HTML SSE

HTML Примеры

HTML Примеры HTML викторина HTML5 викторина HTML Резюме

HTML Рекомендации

HTML Список тегов HTML Атрибуты HTML События HTML холст HTML Аудио Видео HTML DOCTYPEs HTML Цвета HTML Наборы символов HTML URL шифровать HTML Языковые коды HTTP Сообщения HTTP методы PX to EM конвертер Горячие клавиши

HTML5 Local Storage


HTML локальное хранилище, лучше , чем cookies .


Что такое HTML Local Storage?

С локального хранения данных, веб-приложения могут хранить данные локально в браузере пользователя.

Перед тем как HTML5, данные приложения должны были быть сохранены в cookies , включены в запрос каждого сервера. Локальное хранение данных является более безопасным, и большие объемы данных могут храниться локально, не влияя на производительность веб-сайта.

В отличие от cookies , предел хранения намного больше (at least 5MB) , (at least 5MB) и информация никогда не передается на сервер.

Локальное хранение составляет за происхождение (per domain and protocol) . Все страницы, из одного источника, может хранить и получать доступ к тем же данным.


Местное и хранение сессии

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

Данные размещены в локальном запоминающем устройстве составляет за происхождения (сочетание протокола, имени хоста и номер порта, как определено в политике одного источника) (данные доступны для всех сценариев, загруженных из страниц из того же происхождения, которые ранее сохраненных данных) и сохраняется после закрытия браузера.

Секция хранение составляет за происхождения-за окно или язычок и ограничивается время жизни окна. хранения Session предназначено, чтобы отдельные экземпляры одного и те же веб-приложений для работы в разных окнах, не мешая друг с другом, прецедентом, что не очень хорошо поддерживается печеньем.


Поддержка браузеров

Числа в таблице указать первую версию браузера, который полностью поддерживает локальное хранилище.

API
Web Storage 4,0 8,0 3,5 4,0 11,5

HTML Local Storage Objects

HTML локальное хранилище обеспечивает два объекта для хранения данных на стороне клиента:

  • window.localStorage - хранит данные без даты истечения срока
  • window.sessionStorage - хранит данные для одной сессии (данные теряются , когда ушко браузера закрыто)

Перед использованием локального хранилища, проверить поддержку браузера для localStorage и sessionStorage :

if(typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

LocalStorage объекта

Объект LocalStorage хранит данные без даты истечения срока действия. Данные не будут удалены при закрытии браузера, и будут доступны на следующий день, неделю или год.

пример

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Попробуй сам "

Объяснение примера:

  • Создание localStorage имя / значение пары с name="lastname" и value="Smith"
  • Получить значение "lastname" и вставить его в элемент с «результатом» ID =

Приведенный выше пример также может быть записана следующим образом:

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

Синтаксис для удаления "lastname" пункт LocalStorage выглядит следующим образом :

localStorage.removeItem("lastname");

Примечание: пары имя / значение всегда хранятся в виде строк. Помните, чтобы преобразовать их в другой формат, когда это необходимо!

Следующий пример подсчитывает количество раз, когда пользователь нажал кнопку. В этом коде строка значение преобразуется в число, чтобы иметь возможность увеличить счетчик:

пример

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
Попробуй сам "

sessionStorage объекта

sessionStorage объект равен localStorage объекта, за исключением того, что он хранит данные только для одной сессии. Данные удаляются, когда пользователь закрывает вкладку конкретного браузера.

Следующий пример подсчитывает, сколько раз пользователь нажал на кнопку, в текущем сеансе:

пример

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
Попробуй сам "