Учимся работать с локальным хранилищем (LocalStorage) браузера (Замена Cookie)

FavoriteLoadingДобавить в закладки


С приходом HTML5 у нас с вами появилась уникальная возможность уйти от использования Куки к более современному способу сохранения данных в браузере.

Для начала посмотрите ДЕМО

Моё тестирование в редакторе: КЛИК

Почему нужно уходить с использования Куки? Тут есть ряд причин - куки достаточно медленные, у них всегда есть срок годности и ограничение в объёме хранимых данных всего около 4 килобайт, в то время как у Локального хранилища сплошные плюсы - они очень быстрые, у них нет срока жизни и объём данных, который может вмещать в себя хранилище, варьируется от 2 до 10 мегабайт!

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

 


 

1#: Локальное хранилище (LocalStorage)

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

А) Создание новой записи (Изменение старой):

Б) Получение данных записи с нужным именем:

В) Удаление записи с нужным именем:

 

Пример #1 - Создание новой записи в локальном хранилище:

Пример #2 - Проверка и вывод данных из записи в локальном хранилище:

Пример #3 - Удаление записи в локальном хранилище:

 


 

2#: Сессионное хранилище (SessionStorage)

Основное отличие от локального хранилища в том, что данные хранятся только до закрытия вкладки или самого браузера. Я пока что не нашёл применение этому типу хранения данных, но уверен, что вы обязательно придумаете, что хранить таким способом. Использование абсолютно идентично использованию локального хранилища:

А) Создание новой записи (Изменение старой):

Б) Получение данных записи с нужным именем:

В) Удаление записи с нужным именем:

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

 

P.S. Для того, чтобы изменить данные для уже существующей записи, просто создайте новую запись с таким же именем, но уже с другими данными (К примеру, если уже есть запись с именем 'name', в которой, к примеру, хранится 'Привет, народ', а нам нужно записать туда 'Пока, народ', просто выполним localStorage.setItem('name', 'Пока, народ');

P.P.S. Для того, чтобы посмотреть, какие записи и какие данные хранятся в браузере, откройте инструменты разработчика (F12) и перейдите во вкладку Applacation, после чего в левом меню откройте пункт Local Storage или Session Storage

ОтстойОчень плохоПлохоНиже среднегоНормальноМеня зацепилоКлассноШикарноВаще огонь!Это, блять, шедевр! (2 оценок, среднее: 10,00 из 10)

Отправить ответ

Оставьте первый комментарий!

Войти с помощью: 
avatar
  Подписаться  
Сообщать о