Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

localstorage HTML

localstorage HTML

Технология 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)));
}
content

localStorage.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' ,данные которого были изменены, когда мы записали или перезаписали, что то в текстовом поле.

Ну вот и все дорогие друзья.

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

Да, кстати это моя первая статья на сайте, поэтому не судите строго за подачу материала.

Если вам было интересно, у вас появились вопросы или у вас есть что добавить то,вы можете:

Поставить лайк:

Оставлять свои комментарии

Задать мне вопрос (Обратная связь)

Посетить форум на моем сайте

Зарегистрироваться и получить доступ к файлам и наработкам

Надеюсь я помог вам в решении вашего вопроса и подкинул новых идей!

Всего самого наилучшего!

Оцените статью:

Статьи

Разработки

Комментарии

В данном разделе пока нет комментариев!

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm