Подробное объяснение методов хранения HTML5 SessionStorage и LocalStorage

Комментарий: веб -хранилище в HTML5 включает в себя два метода хранения: SessionStorage и LocalStorage. SessionStorage используется для хранения данных в сеансе локально, к которым можно получить доступ только на страницах в том же сеансе, и данные будут уничтожены после окончания сеанса.

1. Разница между веб -хранилищем и файлами cookie

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

Кроме того, Web Storage имеет SetItem, GetItem, RemoveItem, Clear и другие методы. В отличие от печенья, фронтальные разработчики должны сами инкапсулировать Setcookies и Getcookies.

Но файлы cookie также необходимы: функция файлов cookie состоит в том, чтобы взаимодействовать с сервером и существует как часть спецификации HTTP, в то время как веб -хранилище создается только для хранения данных локально (исправление с @otakustay)

2. Статус поддержки браузера веб -хранилища HTML5

За исключением IE7 и ниже, другие стандартные браузеры полностью поддерживают его (т.е. и FF должны работать на веб -сервере). Стоит отметить, что IE всегда делает хорошие вещи. Например, userData в IE7 и IE6 на самом деле являются решением для локального хранения JavaScript. Благодаря простой кодовой инкапсуляции, она может быть объединена для всех браузеров, которые поддерживают веб -хранилище.

Чтобы определить, поддерживает ли браузер LocalStorage, вы можете использовать следующий код:

оповещение ("Обзор поддержки LocalStorage")

}

еще

{

оповещение («Просмотр не поддерживает LocalStorage»)

}

// или if (typeof window.localStorage == 'undefined') {alert ("Просмотр не поддерживает LocalStorage")}

3. Operations LocalStorage и SessionStorage

LocalStorage и SessionStorage имеют одинаковые методы работы, такие как setItem, getItem и removeItem и т. Д.

Методы LocalStorage и SessionStorage:

Значение хранилища SetItem

Цель: Значение магазина в поле ключа

Использование: .setItem (ключ, значение)

Пример кода:

localstorage.setitem ("site", "js8.in");

getItem получите ценность

Цель: Получите значение локально в указанном ключе

Использование: .getItem (ключ)

Пример кода:

var site = localstorage.getitem ("site");

Удалить клавишу удаления

Цель: Удалить значение, хранящееся локально в указанном ключе

Использование: .RemoveItem (ключ)

Пример кода:

localstorage.removeitem ("site");

Очистить все ключ/значение

Цель: Очистить все ключ/значения

Использование: .clear ()

Пример кода:

localstorage.clear ();

4. Другие методы работы: точечная работа и []

Веб -хранилище может не только использовать свой собственный setiTem, getItem и т. Д. Для облегчения доступа, но и использовать оператор Dot (.) И [] для хранения данных, таких как обычные объекты, например, следующий код:

var storage = window.localstorage; Storage.key1 = "Привет";

хранилище ["key2"] = "World";

console.log (storage.key1);

console.log (хранилище ["key2"]);

5. Ключ и свойства длины LocalStorage и SessionStorage реализованы для Traverse

Key () и длина, предоставленная SessionStorage и LocalStorage, может легко реализовать сохраненные данные данных, например, следующий код:

var storage = window.localstorage;

для (var i = 0, len = storage.length; i <len; i ++)

{

var key = storage.key (i);

var value = storage.getitem (key);

console.log (key + "=" + value);

}

6. События хранения

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

window.addeventListener ("storage", harder_storage, false);

}

иначе if (window.attachevent)

{

window.attachevent ("ontorage", handle_storage);

}

функция handle_storage (e) {

if (! e) {e = window.event;}

}

Конкретные свойства объекта события хранения следующие:

Propertytypedescription

клавиш, названная клавиша, которая была добавлена, удалена или модифицирована

OldValueany Предыдущее значение (теперь перезаписано) или NULL, если был добавлен новый элемент

newvalueany новое значение, или NULL, если был добавлен элемент

URL/Uristring страница, на которой назывался метод, который вызвал это изменение