Выборка элементов DOM
Как достать произвольный элемент откуда-то из документа?
Как узнать информацию о документе?
Для этого в DOM есть свойства и методы для выборки одного или коллекции элементов:
anchors | Возвращает коллекцию всех <a> элементов в документе, которые имеют атрибут name |
body | Устанавливает или возвращает <body> элемент |
closest() | Ищет ближайший родительский элемент, подходящий под указанный CSS-селектор |
compareDocumentPosition() | Сравнивает позицию документа из двух элементов |
contains() | Позволяет проверить, содержит ли один элемент внутри себя другой |
cookie | Позволяет прочитать или установить cookie |
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 | Устанавливает или возвращает заголовок документа |
WebSorage | База данных на стороне клиента, содержащая пары ключ-значение. |
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"; alert ("Ok") document.body.style.backgroundColor = "";
Нельзя получить доступ к элементу, которого еще не существует в момент выполнения скрипта.
В частности, если скрипт находится в <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)
Возвращаемое значение
Битовая маска, биты в которой означают следующее:
Биты | Число | Значение |
---|---|---|
000000 | 0 | elementA и elementB -- один и тот же элемент |
000001 | 1 | Узлы в разных документах (или один из них не в документе) |
000010 | 2 | elementB предшествует elementA (в порядке обхода документа) |
000100 | 4 | elementA предшествует elementB |
001000 | 8 | elementB содержит elementA |
010000 | 16 | elementA содержит elementB |
100000 | 32 | Зарезервировано для браузера |
Совместимость с браузерами
Да | 9,0 | Да | Да | Да |
Примеры
- Teст для примера
/* <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);
Более подробно:
- Узлы не вложены один в другой, поэтому стоит только бит «предшествования», отсюда
10
. - То же самое, но обратный порядок узлов, поэтому
100
. - Здесь стоят сразу два бита:
10100
означает, чтоul
одновременно содержитli
и является его предшественником, то есть при прямом обходе дерева документа сначала встречаетсяul
, а потомli
. - Аналогично предыдущему,
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
Объект имеет три свойства:
- name - содержит имя типа документа
- publicId - внешний идентификатор
- systemId - системный идентификатор
Примеры
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,0 | 9,0 | 3,0 | 3,1 | 9,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,0 | 9,0 | 4,0 | 5,0 | 11,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
Возвращаемое значение
Строка, представляющая состояние текущего документа. Значение свойства изменяется по мере загрузки страницы:
- 'loading' - страница ещё загружается.
- 'interactive' - страница уже загрузилась, но внешние ресурсы ещё загружаются.
- 'complete' - страница и все внешние ресурсы полностью загрузились.
Примеры
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 имеет следующие атрибуты:
key
- свойство, которое изменилосьnewValue
— новое заданное значениеoldValue
— ранее сохраненное значениеurl
— полный адрес события, где оно произошлоstorageArea
— объекты localStorage или sessionStorage
Безопасность данных 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 !setSettings();"><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" /> <input onclick="clearSettings()" type="reset" value="Стереть" /> </form> <script> 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'; } </script> </body></html>