Выборка элементов DOM

Как достать произвольный элемент откуда-то из документа?
Как узнать информацию о документе?

Для этого в DOM есть свойства и методы для выборки одного или коллекции элементов:

anchorsВозвращает коллекцию всех <a> элементов в документе, которые имеют атрибут name
bodyУстанавливает или возвращает <body> элемент
closest()Ищет ближайший родительский элемент, подходящий под указанный CSS-селектор
compareDocumentPosition()Сравнивает позицию документа из двух элементов
contains()Позволяет проверить, содержит ли один элемент внутри себя другой
doctypeПозволяет узнать doctype документа.
documentElementВозвращает <html> элемент
embedsВозвращает коллекцию всех <embed> элементов в документе
formsВозвращает коллекцию всех <form> элементов в документе
getElementById()Возвращает элемент по его атрибуту id
getElementsByClassName()Возвращает коллекцию элементов с классом className
getElementsByName()Возвращает колекцию, содержащую элементы с указанным атрибутом name
getElementsByTagName()Возвращает колекцию, содержащую все элементы с указанным именем тега
headВозвращает <head> элемент документа
imagesВозвращает коллекцию всех <img> элементов в документе
lastModifiedВозвращает дату и время последнего изменения страницы.
linksВозвращает коллекцию всех <a> и <area> элементы в документе , которые имеют атрибут href
matches()позволяет проверить удовлетворяет ли элемент указанному CSS-селектору
querySelector()Возвращает первый элемент, соответствующий CSS-селектору
querySelectorAll()Возвращает все элементы, удовлетворяющие CSS-селектору
readyStateВозвращает информацию о текущем состоянии страницы.
referrerВозвращает полный адрес страницы, с которой был выполнен переход на текущую
scriptsВозвращает коллекцию всех <script> элементов в документе
titleУстанавливает или возвращает заголовок документа

anchors

Свойство anchors возвращает коллекцию всех <a> элементов в документе, которые имеют атрибут name

Синтаксис

document.anchors

document.anchors.length      /* возвращает количество элементов в коллекции. */

document.anchors[index]      /* возвращает элемент с указанным индексом
                                или пустое значение , если индекс находится вне диапазона  */

document.anchors.item(index) /* возвращает элемент с указанным индексом
                                или пустое значение, если индекс находится вне диапазона */

document.anchors.namedItem(id) /* возвращает элемент с указанным идентификатором
                                  или пустое значение,  если идентификатор не существует */

Комментарии

Элементы коллекции сортируются, как они появляются в исходном коде

Примеры

<a name="html">HTML Tutorial</a><br>
<a name="css">CSS Tutorial</a><br>
<a name="xml">XML Tutorial</a><br>

<button onclick="myFunction()">Нажмите на кнопку, чтобы отобразить содержимое HTML первого якоря в документе</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.anchors[0].innerHTML;
    document.getElementById("demo").innerHTML = x;
}
</script>

body

Свойство body устанавливает или возвращает <body> элемент.

Синтаксис

document.body [ = newContent ] //Задает новое содержание

Возвращаемое значение

Ссылка на объект Body, который представляет собой <body> элемент, или нулевое значение , если элемент не существует.

Примеры

document.body.style.backgroundColor = "yellow";
setTimeout('document.body.style.backgroundColor = ""',3000);

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

В частности, если скрипт находится в <head>, то в нём недоступен document.body.

Поэтому в следующем примере первый alert выведет null:

<!DOCTYPE HTML>
<html>

<head>
  <script>
    alert( "Из HEAD: " + document.body ); // null, body ещё нет
  </script>
</head>

<body>

  <script>
    alert( "Из BODY: " + document.body ); // body есть
  </script>

</body>
</html>

closest()

Метод closest ищет ближайший родительский элемент, подходящий под указанный CSS селектор (сам элемент тоже включается в поиск).

Синтаксис

element.closest("селектор");

Совместимость с браузерами

41,0Нет35,0Нет28,0

Примеры

Дан элемент #elem. Давайте найдем среди его родителей элемент с классом www и выведем на экран содержимое его атрибута id:

<div id="parent" class="www">
	<div id="block">
		<p id="elem"> Пример </p>
	</div>
</div>
<script>
var elem = document.getElementById('elem');
try { var parent = elem.closest('.www') 
      document.write('id = ' + parent.id); }
catch (e) {document.write("<b style='color:red'> Смените браузер </b>"); }
</script>

compareDocumentPosition()

Метод compareDocumentPosition сравнивает два элемента, и возвращает целое число , описывающее , где они расположены в документе.

Синтаксис

elementA.compareDocumentPosition(elementB)

Возвращаемое значение

Битовая маска, биты в которой означают следующее:

Биты Число Значение
0000000elementA и elementB -- один и тот же элемент
0000011Узлы в разных документах (или один из них не в документе)
0000102elementB предшествует elementA (в порядке обхода документа)
0001004elementA предшествует elementB
0010008elementB содержит elementA
01000016elementA содержит elementB
10000032Зарезервировано для браузера

Совместимость с браузерами

Да9,0ДаДаДа

Примеры

 
/*
<div  id="CDP1">
   <p> </p>
   <ul>
       <li> Teст для примера </li>
   </ul>
</div>  */

  var x,y,s = '';
  var e = document.getElementById("CDP1");
  var p =  e.children[0];
  var ul = e.children[1];
  var li = ul.children[0];

  // 1. <ul> находится после <p>
 x = ul.compareDocumentPosition(p); y=x+' = '+x.toString(2);
 s += "\nul.compareDocumentPosition(p):    " + y;

  // 2. <p> находится до <ul>
 x =p.compareDocumentPosition(ul); y=x+' = '+x.toString(2);
 s += "\np.compareDocumentPosition(ul):    " + y;

  // 3. <ul> родитель <li>
 x =ul.compareDocumentPosition(li); y=x+' = '+x.toString(2);
 s += "\nul.compareDocumentPosition(li):   " + y;

  // 4. <ul> потомок <body>
 x =ul.compareDocumentPosition(e); y=x+' = '+x.toString(2);
 s += "\nul.compareDocumentPosition(e):   " + y;
 Alert (s);

Более подробно:

  1. Узлы не вложены один в другой, поэтому стоит только бит «предшествования», отсюда 10.
  2. То же самое, но обратный порядок узлов, поэтому 100.
  3. Здесь стоят сразу два бита: 10100 означает, что ul одновременно содержит li и является его предшественником, то есть при прямом обходе дерева документа сначала встречается ul, а потом li.
  4. Аналогично предыдущему, 1010 означает, что document.body содержит ul и предшествует ему.

contains()

Метод contains позволяет проверить, содержит ли один элемент внутри себя другой.

Синтаксис

parent.contains(element)

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

Возвращаемое значение

Возвращает true, если узел является потомком узла, в противном случае false.

Примеры

Проверим, находится ли абзац #elem в блоке #parent:

/*
<div id="parent">
	<p id="elem"></p>
</div>  */

var parent = document.getElementById('parent');
var elem = document.getElementById('elem');

Alert(parent.contains(elem));

cookie

Свойство cookie возвращает и устанавливает cookies в браузере.

Синтаксис

document.cookie  // получить весь сохраненый набор cookies

document.cookie = strCookie
strCookie

Для сохранения cookie нужно присвоить текстовую строку, которая содержит свойства создаваемого cookie:

document.cookie = "name=значение; expires=дата; path=путь; domain=домен; secure"

name=значение Основной параметр cookie. Здесь name — уникальное имя для cookie. В качестве значения может быть что угодно, любая структура хранимых данных (да хоть JSON), а также какие угодно символы. Единственная пара, которая является обязательной при установке cookie.
expires=дата Устанавливает дату истечения срока хранения cookie. Дата должна быть представлена в формате, который возвращает метод toUTCString() объекта Date. Если значение expires не задано, cookie будет удалено при закрытии браузера.
max-age=числоВремя жизни куки в секундах (альтернатива параметру expires)
path=путь Данная опция устанавливает путь на сайте, в рамках которого действует cookie. Получить значение cookie могут только документы из указанного пути. Обычно данное свойство оставляют пустым, что означает что только документ установивший cookie может получит доступ к нему.
domain=домен Данная опция устанавливает домен, в рамках которого действует cookie. Получить значение cookie могут только сайты из указанного домена. Обычно данное свойство оставляют пустым, что означает, что только домен установивший cookie может получит доступ к нему.
secure Данная опция указывает браузеру, что для пересылки cookie на сервер следует использовать SSL. Очень редко используется.
samesite=None|Strict|LaxНастройка, необходимая для защиты от XSRF-атак. Атрибут SameSite может иметь разные значения:
  • None,  в этом случае ограничения на файлы Cookie не устанавливаются;
  • Strict,  устанавливается полный запрет на отправку любых Cookie;
  • Lax,    в этом случае файлы Cookie полностью блокируются для межсайтовых запросов (включая изображения, iframe и т.д.).
Ознакомьтесь с этой с этой статьёй, если хотите узнать больше о подобных атаках и предназначении данного параметра.

Комментарии

Cookies предназначены для сохранения небольших объемов данных серверными сценариями, которые должны передаваться на сервер при обращении к каждому соответствующему URL-адресу. Стандарт, определяющий cookies, рекомендует производителям браузеров не ограничивать количество и размеры сохраняемых cookies, но браузеры не обязаны сохранять в сумме более 300 cookies, 20 cookies на один веб-сервер или по 4 Кбайт данных на один cookie (в этом ограничении учитываются и значение cookie, и его имя). На практике браузеры позволяют сохранять гораздо больше 300 cookies, но ограничение на размер 4 Кбайт для одного cookie в некоторых браузерах по-прежнему соблюдается.

Конкурентом для Cookies яыляется HTML5 Web Storage - база данных на стороне клиента, которая позволяет пользователям сохранять данные в виде пары ключ/значение.

В Интернете можно найти много информации о Cookies, в том числе и функции для работы с Cookies.

Здесь предлагается библиотека cookies.js

Иногда посетители отключают cookie. Отловить это можно проверкой свойства navigator.cookieEnabled

if (!navigator.cookieEnabled) {
  Alert( 'Включите cookie для комфортной работы с этим сайтом' );
}

getCookies()

// Возвращает cookies документа в виде объекта с парами имя:значение. 
// Предполагается, что значения cookie кодируются с помощью 
// функции encodeURIComponent()
function getCookies() {
 var cookies = {};  // Возвращаемый объект
 var all = document.cookie;  // Получить все cookies в одной строке
 if (all === "") return cookies; // Если получена пустая строка, вернуть пустой объект

// Разбить на пары имя:значение
 var list = all.split("; ");
 for(var i = 0; i < list.length; i++) {
   // Для каждого cookie удалим пробельные символы в начале и в конце
   var cookie = list[i].replace(/^\s+|\s+$/g, '');
   var t = cookie.split('=');
   var name = t[0].replace(/\s+$/,'');
   t[1] = t[1].replace(/^\s+/,'');
                 // Декодировать значение
   var value = decodeURIComponentX(t[1]);
   cookies[name] = value; // Сохранить имя и значение в объекте 
  }
 return cookies; 
}

getCookie()

// возвращает cookie с именем name, если есть, если нет, то undefined
function getCookie(name) {
  var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponentX(matches[1]) : undefined;
}

setCookie()

// устанавливает cookie с именем name и значением value и 
// с свойствами expires, path, domain, secure
function setCookie(name, value, expires, path, domain, secure) {
  if (!name) return false;
  var str = name + '=' + encodeURIComponent(value);
  if (typeof expires == "number" && expires) { // секунды
    var d = new Date();
    d.setTime(d.getTime() + expires * 1000);
    expires = d; }
  if (expires && expires.toUTCString) { 
    str += '; expires=' + expires.toUTCString(); }
  if (path)    str += '; path=' + path;
  if (domain)  str += '; domain=' + domain;
  if (secure)  str += '; secure';
  document.cookie = str;
  return true;
 }

deleteCookie()

 // удаляет cookie с именем name
function deleteCookie(name) {  setCookie(name, "", -1); }

decodeURIComponentX()

// Вспомогательная функция для Декодирования
function decodeURIComponentX (text) { var value; 
 try { value = decodeURIComponent(text); }
 catch (e) { value = unescape(text);} 
 return value;  }

Примеры

var a = getCookies(), s=''; 
for (var t in a) {s+='\n'+t+': '+a[t];} Alert (s);

setCookie('name','Вася',5*60*60);  // 5 часов
setCookie('address','Я из Сибири',new Date (2021,1,1) );
setCookie('login','Gato');
setCookie('password','qwert; йцуке;');

Alert (document.cookie);
a = getCookies(), s='';
for (var t in a) {s+='\n'+t+': '+a[t];} Alert (s);

Alert ( getCookie('login')+'\n'+getCookie('password') );

deleteCookie ('name'); deleteCookie ('address'); deleteCookie ('Settlement');

a = getCookies(), s='';
for (var t in a) {s+='\n'+t+': '+a[t];} Alert (s);

doctype

Свойство doctype представляет объявление документа <!DOCTYPE>, как объект DocumentType.

Синтаксис

document.doctype

Объект имеет три свойства:

Примеры

var a = document.doctype;
Alert (a.name +',   ' + a.publicId + ',   ' + a.systemId);

documentElement

Свойство documentElement возвращает ссылку на объект HTML-элемента (или XML-элемента), который представляет содержимое всего текущего документа. Это свойство как бы "присуждает" звание "элемента" объекту document и узлу документа, связанного с текущей страницей, загруженной в броузере.

Синтаксис

document.documentElement

Комментарии

Если HTML элемент отсутствует, возвращаемое значение равно нулю.

Разница между этим свойством и document.body собственности, является то , что document.body элемент возвращает <body> элемент, в то время как document.documentElement возвращает <html> элемент.

embeds

document.embeds возвращает коллекцию всех <embed> элементов в документе

Синтаксис

document.embeds

document.embeds.length      /* возвращает количество элементов в коллекции. */

document.embeds[index]      /* возвращает элемент с указанным индексом
                                или пустое значение , если индекс находится вне диапазона  */

document.embeds.item(index) /* возвращает элемент с указанным индексом
                                или пустое значение, если индекс находится вне диапазона */

document.embeds.namedItem(id) /* возвращает элемент с указанным идентификатором
                                  или пустое значение,  если идентификатор не существует */

Возвращаемое значение

document.embeds возвращает коллекцию всех <embed> элементов в документе.

Примеры

Alert ("Количество <embed> элементов на этой странице: " + document.embeds.length);

forms

Свойство forms возвращает коллекцию всех <form> элементов в документе

Синтаксис

document.forms

document.forms.length      /* возвращает количество элементов в коллекции. */

document.forms[index]      /* возвращает элемент с указанным индексом
                                или пустое значение , если индекс находится вне диапазона  */

document.forms.item(index) /* возвращает элемент с указанным индексом
                                или пустое значение, если индекс находится вне диапазона */

document.forms.namedItem(id) /* возвращает элемент с указанным идентификатором
                                  или пустое значение,  если идентификатор не существует */

Возвращаемое значение

Свойство document.forms возвращает коллекцию всех <form> элементов в документе.

Примеры

Alert ("Количество <form> элементов на этой странице: " + document.forms.length);

getElementById()

Метод getElementById возвращает элемент (тег) страницы по его атрибуту id.

С полученным элементом можно будет производить различные манипуляции: менять его текст, атрибуты, css стили и так далее.

Синтаксис

document.getElementById("идентификатор");

Примеры

Выделим этот элемент
// <div id="content">Выделим этот элемент</div>
var elem = document.getElementById('content');
elem.style.background = 'red';
Alert( elem == content ); // true
elem.style.background = ""; // один и тот же элемент

getElementsByClassName()

Метод getElementsByClassName возвращает коллекцию элементов с классом className. Находит элемент и в том случае, если у него несколько классов, а искомый – один из них.

Синтаксис

document.getElementsByClassName("имя класса");
element.getElementsByClassName("имя класса");

Совместимость с браузерами

4,09,03,03,19,5

Примеры

// Определим сколько элементов   на нашей странице имеют class «syntax»
 var alist = document.getElementsClassName ? 
             document.getElementsClassName("syntax") : 
             document.querySelectorAll(".syntax");
 Alert ( alist.length );

getElementsByName

Метод getElementsByName позволяет получить все элементы с данным атрибутом name.

Синтаксис

document.getElementsByName (name)

name - значение атрибута name.

Комментарии

До появления стандарта HTML5 этот метод возвращал только те элементы, в которых предусмотрена поддержка атрибута name, в частности: iframe, a, input и другими. В современных браузерах (IE10+) тег не имеет значения.

Используется этот метод весьма редко.

Примеры

Alert ( document.getElementsByName('Example')[0].outerHTML );

getElementsByTagName()

Метод getElementsByTagName ищет все элементы с заданным тегом tag внутри элемента elem и возвращает их в виде списка.

Синтаксис

document.getElementsByTagName("имя тега");
element.getElementsByTagName("имя тега");

Комментарии

Регистр тега не имеет значения.

Можно получить всех потомков, передав звездочку '*' вместо тега.

Возвращаемое значение

Метод возвращает псевдомассив (коллекцию) элементов, а не один элемент.

Примеры

// Определим сколько тегов "H3" на нашей странице
 var alist = document.getElementsByTagName("h3");
Alert ( alist.length );

head

Свойство document.head возвращает <head> элемент документа.

Синтаксис

document.head

Комментарии

Если есть более чем один <head> элемент в документе, это свойство возвращает первый.

Совместимость с браузерами

4,09,04,05,011,0

Примеры

Получить идентификатор <head> элемент текущего документа: 
<!DOCTYPE html>
<html>
<head id="myHead">
<title>My title</title>
</head>
<body>

<button onclick="myFunction()"> Нажми здесь </button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.head.id;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Alert (document.head.innerHTML); // head web-страницы

images

Свойство document.images возвращает коллекцию всех <img> элементов в документе.

Синтаксис

document.images

document.images.length      /* возвращает количество элементов в коллекции. */

document.images[index]      /* возвращает элемент с указанным индексом
                                или пустое значение , если индекс находится вне диапазона  */

document.images.item(index) /* возвращает элемент с указанным индексом
                                или пустое значение, если индекс находится вне диапазона */

document.images.namedItem(id) /* возвращает элемент с указанным идентификатором
                                  или пустое значение,  если идентификатор не существует */

Комментарии

Элементы коллекции сортируются , как они появляются в исходном коде.

Примеры

Получить URL первого <img> элемента (index 0) в документе:

<img src="img1.jpg" alt="image1" width="110" height="50">
<img src="img2.jpg" alt="image2" width="120" height="60">
<img src="img3.gif" alt="image3" width="130" height="40">
<br />
<button onclick="myFunction()">Нажми здесь</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.images.item(0).src;
    document.getElementById("demo").innerHTML = x;
}
</script>

lastModified

Свойство lastModified возвращает дату и время последнего изменения документа.

Синтаксис

document.lastModified

Примеры

Alert (document.lastModified);

links

Свойство document.links возвращает коллекцию всех <a> и <area> элементов в документе , которые имеют атрибут HREF

Синтаксис

document.links

document.links.length      /* возвращает количество элементов в коллекции. */

document.links[index]      /* возвращает элемент с указанным индексом
                              или пустое значение , если индекс находится вне диапазона  */

document.links.item(index) /* возвращает  с указанным индексом
                              или пустое значение, если индекс находится вне диапазона */

document.links.namedItem(id) /* возвращает  с указанным идентификатором
                                или пустое значение,  если идентификатор не существует */

Комментарии

Элементы коллекции сортируются , как они появляются в исходном коде.

Примеры

Определим сколько ссылок есть в документе и outerHTML первого и пятого элементов:

var alist = document.links;
Alert ( alist.length + '\n' + 
       alist[0].outerHTML + '\n' + 
       alist.item(4).outerHTML);

matches()

Метод matches позволяет проверить удовлетворяет ли элемент указанному CSS-селектору

Синтаксис

element.matches("селектор");

Возвращаемое значение

Метод matches ничего не ищет, а проверяет, удовлетворяет ли elem CSS-селектору. Он возвращает true либо false

Совместимость с браузерами

ДаНетДаДаДа

Примеры

var alist = document.getElementsByTagName('p');
if (!alist[0].matches) Alert ("Ваш браузер не поддерживает метод matches");
else {
 for (var i = 0; i < alist.length; i++) 
   {if (alist[i].matches("p#test")) {Alert (alist[i].innerHTML); break;}} }

querySelector()

Метод querySelector возвращает не все, а только первый элемент, соответствующий CSS-селектору.

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

Синтаксис

document.querySelector("селектор");
element.querySelector("селектор");

Примеры

Этот текст заключен в <p id="test1"> </p> 

var elem = document.querySelector('p#test1');
elem.style.background='red';
alert ("Сработало?");
elem.style.background='';

querySelectorAll()

Метод querySelectorAll возвращает все элементы, удовлетворяющие CSS-селектору.

Это один из самых часто используемых и полезных методов при работе с DOM.

Он есть во всех современных браузерах, включая IE8+

Синтаксис

document.querySelectorAll("селектор");
element.querySelectorAll("селектор");

Примеры

Этот текст заключен в <p id="test"> </p> 

var alist = document.querySelectorAll('p#test');
alist[0].style.background='green';
Alert ("Сработало?");
alist[0].style.background='';

readyState

Свойство readyState возвращает статус текущего документа.

Синтаксис

document.readyState

Возвращаемое значение

Строка, представляющая состояние текущего документа. Значение свойства изменяется по мере загрузки страницы:

Примеры

Alert ( document.readyState );

referrer

Свойство referrer возврашает строку, представляющую полный адрес страницы, с которой был выполнен переход на текущую страницу, или пустую строку.

Синтаксис

document.referrer

Примеры

Alert ( document.referrer );

scripts

Свойство document.scripts возвращает коллекцию всех <script> элементов в документе

Синтаксис

document.scripts

document.scripts.length      /* возвращает количество элементов в коллекции. */

document.scripts[index]      /* возвращает элемент с указанным индексом
                                или пустое значение , если индекс находится вне диапазона  */

document.scripts.item(index) /* возвращает элемент с указанным индексом
                                или пустое значение, если индекс находится вне диапазона */

document.scripts.namedItem(id) /* возвращает элемент с указанным идентификатором
                                  или пустое значение,  если идентификатор не существует */

Возвращаемое значение

Свойство document.scripts возвращает коллекцию всех <script> элементов в документе.

Примеры

Alert ("Количество <script> элементов на этой странице: " + document.scripts.length);

title

Свойство title возвращает заголовок документа. Доступно для перезаписи.

Синтаксис

document.title [ = newTitle ]

newTitle - новый текст заголовка.

Возвращаемое значение

Строка, представляющая заголовок документа.

Примеры

Alert (document.title);

Web Storage

HTML5 Web Storage - Это база данных на стороне клиента, которая позволяет пользователям сохранять данные в виде пары ключ/значение.

HTML5 Web Storage имеет достаточно простой API для извлечения записи данных локального хранилища. Он может хранить до 10 Мб данных для одного домена. В отличие от файлов cookie, Web Storage не делает каждый раз запрос HTTP.

Существуют 2 основных типа веб-хранилища: локальное хранилище (localStorage) и сохранение сессии (sessionStorage), которые отличаются по своим масштабам и времени жизни. Данные размещаются в отдельное для каждого домена локальное хранилище (оно доступно для всех скриптов из домена, который первоначально добавил данные) и сохраняются после закрытия браузера. Сессия сохраняется по принципу одна-страница-одно-окно и ограничивается жизнью данного окна, то есть для каждого открытого окна создается новая сессия, которая прекращает свое существование при закрытии окна и не зависит от домена открывшего ее. Сохранение сессии предназначено для предоставления отдельных экземпляров одного и того же веб-приложения для работы в разных окнах, не мешая друг другу.

Проверить, поддерживает ли браузер эти API можно с помощью следующей строки:

if (window.sessionStorage && window.localStorage) {
      Alert ('объекты sessionStorage и localtorage поддерживаются');
    }
else { Alert ('объекты sessionStorage и localtorage НЕ поддерживаются');
    }

В своих исследованиях веб-хранилища вы можете столкнуться с неожиданной проблемой. Во многих браузерах веб-хранилище работает только для страниц, предоставленных веб-сервером. При этом не важно, где расположен сервер, в интернете или на вашем собственном компьютере, самое главное, просто чтобы страницы не запускались с локального жесткого диска (например, двойным щелчком по значку файла страницы). Поэтому вы избавите себя от многих хлопот, если поместите тестируемую страницу на тестовый сервер, чтобы избежать всех этих неопределенностей.

Методы и свойство length объектов sessionStorage и localStorage

.getItem(key)
Метод getItem(key) используется для получения значения элемента хранилища по его ключу (key).
.setItem(key,value)
Метод setItem(key,value) предназначен для добавления в хранилище элемента с указанным ключом (key) и значением (value). Если в хранилище уже есть элемент с указанным ключом (key), то в этом случае произойдет изменения его значения (value).
.key(индекс)
Метод key(индекс) возвращает ключ элемента по его порядковому номеру (индексу), который находится в данном хранилище.
.removeItem(key)
Метод removeItem(key) удаляет из контейнера sessionStorage или localStorage элемент, имеющий указанный ключ.
.clear()
Метод clear() удаляет все элементы из контейнера.
.length
Свойство length возвращает количество элементов, находящихся в контейнере.

Необходимо отметить, что сохранять можно только строковые данные. Иногда требуется сохранять объекты. Ничего не остается как воспользоваться сериализацией:

// Создаем объект UserInfo
var user1 = {name: 'Вася', family: 'Петров'}
// Сохраняем этот объект в формате JSON
sessionStorage.setItem ('userinfo', JSON.stringify(user1));

// Преобразуем JSON-текст в соответствующий объект
var user2 = JSON.parse(sessionStorage['userinfo']);

Alert("Привет " + user2.name + " " + user2.family);

События storage

Когда мы установим или удалим данные из веб — хранилища, хранилище запустит событие объекта window. Мы можем добавить обработку события:

window.addEventListener('storage', storageEventHandler, false);
// примечание: для IE 8,0- нужно использовать метод:  attacheEvent() 
function storageEventHandler(e) {
    var message = document.getElementById("updateMessage");
    message.innerHTML = "Обновление локального хранилища: "+ e.storageArea;
    message.innerHTML += "
Ключ: " + e.key;
    message.innerHTML += "
Старое значение: " + e.oldValue;
    message.innerHTML += "
Новое значение: " + e.newValue;
    message.innerHTML += "
URL: " + e.url;
}

Событие event имеет следующие атрибуты:

Безопасность данных localStorage и sessionStorage

Программные интерфейсы localStorage и sessionStorage ограничивают доступ к данным тем доменом с учетом протокола и номера порта, в котором находится данная страница. Т.е. данные контейнеров доступны только тем веб-страницам, которые принадлежат этому домену. Страницы, которые не расположены в этом домене не могут прочитать или удалить данные этих контейнеров.

Пример

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример</title>
</head>
<body onload="applySetting()">
<form onsubmit="return false;"><label>Выбрать цвет для фона: </label>
  <input id="favcolor" type="color" value="#ffffff" />
  <label>Select Font Size: </label>
  <input id="fontwt" type="number" max="14" min="10" value="13" />
  <input type="submit" value="Save" onclick="setSettings()" />
  <input onclick="clearSettings()" type="reset" value="Стереть" />
</form>
</body></html>

var testStorage = true;
function setSettings() {
  if (testStorage) {
    try {
      var favcolor = document.getElementById('favcolor').value;
      var fontwt = document.getElementById('fontwt').value;
      localStorage.setItem('bgcolor', favcolor);
      localStorage.fontweight = fontwt; location.reload(true);
     } catch (e) {
        if (e == QUOTA_EXCEEDED_ERR) {
        Alert('Quota exceeded!'); // исключение, если лимит хранилища превышает 5 Мб
       } } } 
  else { Alert('Данные не сохранятся, ваш браузер не поддерживает Local storage'); } }

function applySetting() {
 if ('localStorage' in window && window['localStorage'] == null) 
   {testStorage = false; Alert ('Ваш браузер не поддерживает Local storage'); return;}
 if (localStorage.length != 0) {
    document.body.style.backgroundColor = localStorage.getItem('bgcolor');
    document.body.style.fontSize = localStorage.fontweight + 'px';
    document.getElementById('favcolor').value = localStorage.bgcolor;
    document.getElementById('fontwt').value = localStorage.fontweight;
   } 
  else {
    document.body.style.backgroundColor = '#FFFFFF';
    document.body.style.fontSize = '14px'
    document.getElementById('favcolor').value = '#FFFFFF';
    document.getElementById('fontwt').value = '14';
  }
}

function clearSettings() {
  localStorage.removeItem("bgcolor");
  localStorage.removeItem("fontweight");
  document.body.style.backgroundColor = '#FFFFFF';
  document.body.style.fontSize = '14px'
  document.getElementById('favcolor').value = '#FFFFFF';
  document.getElementById('fontwt').value = '14';
}
Справочник JavaScript⌕≡
×
Справочник JavaScript