Учимся работать с локальным хранилищем (LocalStorage) браузера (Замена Cookie)
1#: Локальное хранилище (LocalStorage) На самом деле всё элементарно. Для работы нам нужно знать всего три параметра, чтобы управлять записями в локальном хранилище: А) Создание новой записи (Изменение старой):
1 |
localStorage.setItem('name', 'Тут может быть строка, массив, переменная, числа и прочее'); |
1 |
localStorage.getItem('name'); |
1 |
localStorage.removeItem('name'); |
1 2 3 |
<script> localStorage.setItem('name', 'Привет, друг'); // В локальном хранилище создана запись с именем 'name', в которой содержится информация 'Привет, друг' </script> |
1 2 3 4 5 6 7 |
<script> if(localStorage.getItem('name')) { // Если в локальном хранилище есть запись с именем 'name' alert(localStorage.getItem('name')); // Выведем в алерте то, что хранится в этой записи } else { alert('В локальном хранилище нет записи с таким именем'); // В противном случае выведем это }; </script> |
1 2 3 |
<script> localStorage.removeItem('name'); // Удаляем из локального хранилища запись с именем 'name' </script> |
2#: Сессионное хранилище (SessionStorage) Основное отличие от локального хранилища в том, что данные хранятся только до закрытия вкладки или самого браузера. Я пока что не нашёл применение этому типу хранения данных, но уверен, что вы обязательно придумаете, что хранить таким способом. Использование абсолютно идентично использованию локального хранилища: А) Создание новой записи (Изменение старой):
1 |
sessionStorage.setItem('name', 'Тут может быть строка, массив, переменная, числа и прочее'); |
1 |
sessionStorage.getItem('name'); |
1 |
sessionStorage.removeItem('name'); |