В этой статье мы рассмотрим механизмы и принципы использования localStorage и свойство Wndow.localStorage, а также поработаем с простыми реализациями хранилища в JavaScript.
Что такое Web Storage API?
Web Storage API это способ для браузеров хранить информацию в виде пар ключ-значение в виде базы данных. Вы можете подумать, что это аналог кукис, но этот механизм работает более понятно и удобнее, чем печеньки.
Итак, с помощью этого API мы можем хранить пары ключ-значение в виде объектов хранилища и они не исчезают при перезагрузке страницы и они всегда хранятся в виде строк. Вы можете получить доступ к этим значениям как будто это обьект или с помощью метода getItem, о котором также будет рассказано немного позже.
Какая разница между sessionStorage и localStorage?
Web Storage API имеет два механизма - sessionStorage и localStorage. Оба они дают отдельную область хранения для каждого адреса источника на время сессии страницы.
Основное отличие sessionStorage и localStorage в том, что sessionStorage хранит данные только пока открыт браузер (всключая перезагрузки страницы или восстановления), а localStorage продолжает хранить данные даже после закрытия браузера. В этой статье мы сфоркусируемся на работе с localStorage.
Что такое localStorage в JavaScript?
localStorage это свойство, которое позволяет сайтам и приложениям хранить данные в виде ключ-значение нужное количество времени. Даже если мы закроем программу браузера, они не исчезнут.
Где хранятся данные localStorage?
В браузере Google Chrome, например, это хранилище реализовано в виде файловой базы данных SQLite и хранится этот файл в структуре папок профиля пользователя. Обычно эта папка находится по пути "\AppData\Local\Google\Chrome\User Data\Default\Local Storage" на компьютерах под управлением Windows или в папке "~/Library/Application Support/Google/Chrome/Default/Local Storage" в Mac OS.
Браузер Firefox также хранит эти данные в виде файлов базы данных SQLite под названием webappsstore.sqlite также в профиле пользователя, но по другому пути.
Что такое Window.localStorage?
Мы можем получить доступ к localStorage через свойство Window.localStorage. Это часть интерфейса окна Window в JavaScript, которая дает нам инструментарий для работы с DOM документом.
Window.localStorage это свойство только для чтения, которое возвращает ссылку на объект - локальное хранилище, который используется для для хранения данных и доступен он только для скриптов страницы, загруженной из текущего источника.
Как работает localStorage?
Есть несколько методов для работы с localStorage в приложениях:
- setItem() - добавить ключ и значение в localStorage.
- getItem() - получить значение записи из localStorage
- removeItem() - удалить запись по ключу из localStorage
- clear() - удалить все записи в localStorage
- key() для получени ключа из localStorage
Метод setItem(). Как сохранить значения в localStorage
Этот метод имеет два параметра - ключ и значение.
Пример:
window.localStorage.setItem('name', 'value');
name здесь будет название ключа, а value - значение, которые мы сохраняем. Не забывайте, что мы можем хранить только строковые значения.
Чтобы сохранить массивы или объекты, надо будет их сначала преобразовать в строковый вид - сериализовать. Мы можем сделать это с помощью метода JSON.stringify().
Пример:
const dog = {
name: "Pet",
age: 3
}
window.localStorage.setItem('dog', JSON.stringify(dog));
Наш обьект будет преобразован в строку '{"name":"Pet","age":3}' перед сохранением.
Метод getItem() - получение записи из хранилища localStorage.
Чтобы получить записи из localStorage, используйте метод getItem(). Он принимает лишь один параметр - значение ключа под которым мы ранее сохранили свои данные и возвращает их хранилища localStorage в виде строки.
window.localStorage.getItem('dog');
вернет нам нашу запись '{"name":"Pet","age":3}' в виде строки.
И чтобы ее преобразовать обратно в объект мы можем использовать метод JSON.parse(), который преобразует строковые значения в объекты JavaScript (если это возможно).
JSON.parse(window.localStorage.getItem('dog')) вернет нам уже объект.
removeItem() - удаление записи из localStorage.
Чтобы удалить запись по ее ключу, просто используем
window.localStorage.removeItem('dog');
И будет произведено удаление объекта с таким ключом, если он есть в хранилище. Если нет - ошибки не будет.
Отчистка хранилища localStorage с помощью метода clear()
Метод не принимает никаких параметров и просто отчищает хранилище данного истоника-страницы.
window.localStorage.clear();
Как получить имя ключа из localStorage по индексу ключа. Метод key()
Когда нам надо перебрать значения ключей хранилища и получать их имена мы можем использовать метод key(), который вернет имя ключа по его индексу.
var KeyName = window.localStorage.key(keyIndex);
Поддержка браузерами localStorage.
localStorage является частью стандарта HTML5. Поэтому оно уже поддерживается большинством браузеров включая даже IE8. Но этом можно проверить таким способом:
if (typeof(Storage) !== "undefined") {
// localStorage поддерживается
} else {
// Нет поддержки localStorage.
}
Какие есть ограничения у localStorage?
Вот, что необходимо учитывать при работе с localStorage для безопасной работы:
- не храните в нем информацию, опасную для пользователя сайта
- оно не заменит серверную базу данных
- его размер ограничен 5 МБ во всех основных браузерах
- в нем нет никаких методов защиты данных.
- localStorage синхронное, значит каждая операция будет выполняться по-порядку одна за другой.
Комментарии
Отправить комментарий