Технология Web-хранилища позволяет хранить данные на стороне клиента в браузере и по своей сути очень похожа на cookie, но не будем тянуть и сразу перейдем е делу.
Для того чтобы пользоваться данной технологией существуют два объекта:
- localStorage - хранить данные бессрочно , да , даже если вы закроете владки браузера и запустите новый сеанс ,данные также останутся в хранилище
-sessionStorage - хранит данные только в текущем сеансе, то есть при закрытии браузера данные будут удалены
Чем лучше воспользоваться выбирать вам
Но тут следует учитывать, что данные локального хранилища будут доступны только в браузере и домене сайта на котором вы их создали. Таковы уж правила!
Ну что давайте вместе поработаем с локальным хранилищем и сразу посмотрим результат для этого открываем консоль в браузере, обычно это ctrl+shift+j и пишем там следующее после чего нажимаем enter:
localStorage.setItem('key', 'Записываемые данные'); или localStorage['key'] = 'Записываемые данные'''Как видите вначале указывается сам объект в данном случае это localStorage , key - это ключ по которому вы сможете обращаться и манипулировать записанными данными, ключ можно называть, как хотите
Чтобы считать наши данные с локального хранилища введем:
localStorage.getItem('key'); или localStorage.['key'];Как видите работать с локальным хранилищем не так уж сложно, поэтому поехали далее:
Объем памяти локального хранилища по слухам 5МВ и это довольно не мало
Мы уже научились записывать и считывать данные с локального хранилища, теперь поговорим о изменении и удалении данных
Обновление это просто:
localStorage.getItem['key'] = 'перезаписать данные'то есть, мы просто указываем раннее созданный ключ и записываем туда другое значение, в результате чего старые данные перезаписываются Удаление происходить следующий образом:
localStorage.clear('key');если мы хотим очистить значение всех ключей локального хранилища:
localStorage.clear();Как видите ничего сложного здесь нет
localStorage.length; - данные код позволяет определить количество записей в локальном хранилище, то есть в нашем случае это ноль. Почему? Да потому что мы последнюю запись удалили,попробуем добавить несколько записей и повторно выполнить код
Теперь мы видим что он посчитал нам количество добавленных записей
Теперь пример, как мы это можем использовать на практике:
Допустим мы записали какие то данные в локальное хранилище:
localStorage.setItem('login', 'Vasya');
localStorage.setItem('password', 'fijrifjer');
localStorage.setItem('email', 'Vasya@mail.ru');И нам нужно их получить, можно сделать так:
localStorage.getItem('login');
localStorage.getItem('password');
localStorage.getItem('email');
Есть и другой вариант:
var content = [];
for(var i = 0;i < localStorage.length; i++){
content.push(localStorage.getItem(localStorage.key(i)));
}
contentlocalStorage.key(0);- Достает ключ в данном случае первый;
Во втором варианте мы достанем все ключи локального хранилища и записываем их в массив content Как мы можем видеть наши записанные значения присутствуют в массиве
window.addEventListener('storage', function(e) {
console.log(e.key);
});Так,теперь практика и заодно рассмотрим событие storage , да да вы не ослышались у локального хранилища есть событие, которое срабатывает при изменении значения ключа,поехали:
Создадим папку на любом из ваших дисков и назовем как хотите не важно:
В ней у нас будут два файла с расширением html при этом нам понадобится локальный сервер (OpenServer или Denwer и т.п):
Открываем файлы в среде разработки допустим в notepad++ и записываем туда следующий код:
В первом файле :(textarea.html)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Входные данные</title>
</head>
<body>
<textarea style="width:100%; height:300px;"><textarea>
<script>
document.querySelector("textarea").addEventListener('keyup',function(){
localStorage.setItem('text',document.querySelector("textarea").value);
});
document.querySelector('textarea').value = localStorage.getItem('text') ;
</script>
</body>
</html>Во втором файле:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Входные данные</title>
</head>
<body>
</body>
<script>
window.addEventListener('storage', function(e) {
document.querySelector('body').innerHTML = localStorage.getItem(e.key);
});
document.querySelector('body').innerHTML = localStorage.getItem('text');
</script>
</html>Теперь запускаем локальную машину у меня к примеру это OpenServer и открываем эти два файла в двух вкладках:
Пишем в текстовом поле что-нибудь и теперь посмотрите на другую вкладку , кстати для удобства можно,открыть эти два файла в разных окнах браузера ctrl+n, кто не знает,и сделать каждую из них на пол экрана win+righn и win+left
Как видите данные которые мы пишем в текстовом поле, сразу же отображаются в другой вкладке, даже если мы будем перезагружать страницы данные никуда не пропадут , так как они сохранены в локальном хранилище и при загрузке страницы считываются и подставляютсяЧем то, похоже на ajax не правда ли ,но следует учитывать ,это работает если вкладки открыты и что в сами файлы ничего не записывается, все действие разворачивается в браузере
Ну хватить философии, теперь расмотрим js-код:
textarea.html
document.querySelector("textarea").addEventListener('keyup',function(){
localStorage.setItem('text',document.querySelector("textarea").value);
});Здесь мы отлавливаем событие нажатия клавиш 'keyup',то есть если мы нажимаем какую нибудь клавишу выполняется код
localStorage.setItem('text',document.querySelector("textarea").value)здесь все понятно, в локальное хранилище с ключом 'text' записывается содержимое текстового поля
document.querySelector('textarea').innerHTML = localStorage.getItem('text');этот код , есть в обоих файлах, здесь данные локального хранилища при загрузке страницы считываются и записываются в выбранный элемент
Теперь самое интересное, как говорится на десерт
window.addEventListener('storage', function(e) {
document.querySelector('body').innerHTML = localStorage.getItem(e.key);
});Здесь мы отлавливаем событие Storage ,оно срабатывает если данные одного из ключей в локального хранилища меняются, то есть 'e.key' это название ключа, в нашем случае это 'text' ,данные которого были изменены, когда мы записали или перезаписали, что то в текстовом поле.
Ну вот и все дорогие друзья.
Подчеркну, что это основные (часто используемые) свойства и методы работы с локальным хранилищем.
Да, кстати это моя первая статья на сайте, поэтому не судите строго за подачу материала.
Если вам было интересно, у вас появились вопросы или у вас есть что добавить то,вы можете:
Поставить лайк:
Оставлять свои комментарии
Задать мне вопрос (Обратная связь)
Посетить форум на моем сайте
Зарегистрироваться и получить доступ к файлам и наработкам
Надеюсь я помог вам в решении вашего вопроса и подкинул новых идей!
Всего самого наилучшего!
