Локальная баннерная система Javascript


Оглавление (нажмите, чтобы открыть):

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

Друзья!
Мне необходима помощь специалистов в следующем деле:

Я хочу вывести свой баннер на сайте партнёра при помощи скрипта, так мне нужна возможность замены/смены/редактирования этого баннера и его ссылок удалённо.

Что именно я имею ввиду:

Мне нужен скрипт (подскажите как реализовать) который одним кодом будет выводить на сайте партнёра один баннер в котором будет 3 подбаннера (пример на картинке)

Это по сути три картинки с ссылками, которые должны выводится одновременно (не поочерёдно), чтобы сам скрипт и файлы (изображения) хранились на моём сайте, а при помощи ссылки на скрипт отображались на сайте партнёра. Это даст мне возможность изменять содержимое у себя в скрипте.

Подскажите как реализовать. Благодарю заранее за помощь.

Javascript: полезные функции — Часть Iv

Mike Melnikov (Web-studio «Cherry-Design»)
www.citforum.ru
Сегодня мы разберемся с тем, как организовать на страничке локальную баннерную систему, пользуясь только средствами JavaScript. Данная функция, кстати, может быть полезна и программистам на ASP.

Для чего это нужно?

Механизм баннеров позволяет оживить страничку и зрительно создать впечатление, что сайт все время меняется. Наиболее полезна эта функция будет для контент-сайтов — очень удобно создавать баннеры для конкретных статей и размещать их в локальной баннерной системе. Лучше всего, конечно, механизм прокрутки баннеров организовать на стороне сервера с применением Perl, PHP или ASP, но не у всех, к сожалению, есть доступ к CGI-скриптам. И, в этом случае, для решения задачи мы можем воспользоваться встроенными скриптовыми языками.

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

Условия задачи и ограничения

А теперь, давайте, более подробно сформулируем условия задачи и введем ряд ограничений, которые упростят программирование. Баннерная система должна выполнять следующие функции:

где-то хранить базу данных о баннерах
случайно выбирать, из вышеупомянутой базы, несколько неповторяющихся баннеров
обеспечивать механизмы отображения баннеров и перехода на нужную страничку при нажатии
Накладываем на эти условия некоторые ограничения:

баннеры будут фиксированного размера, и храниться в формате GIF или JPEG
на страничке мы будем одновременно показывать четыре баннера
Ну вот, условия и ограничения определены. Теперь, давайте, более подробно рассмотрим, каким образом лучше всего хранить баннеры. В качестве базы для хранения параметров баннеров мы воспользуемся обычным массивом. О каждом из баннеров нам будет необходимо хранить следующую информацию:


имя файла
альтернативный текст
адрес странички, на которую ссылается баннер
Для удобства хранения и обновления базы баннеров, лучше всего выделить ее описание в отдельный файл и подключить при помощи механизма вставки внешнего js-файла. Это делается в секции заголовка при помощи следующей конструкции:

А вот так, будет выглядеть содержимое файла banners.js

var banners = new Array(

Как видите, структура массива не очень сложна. Под каждый баннер отводится три последовательные ячейки, в которых и хранятся: имя файла, альтернативный текст, адрес ссылки.

Вот мы и добрались до программирования. И, сначала, разберемся с некоторыми моментами.

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

Но, как я уже упоминал раньше, мы договорились, что одновременно на страничке будут показываться четыре баннера. И, следовательно, после каждой генерации случайного числа нам необходимо проверить, что данный баннер не совпадает с 3-мя другими. К тому же нам нужно где-то хранить уже сгенерированные числа. Для решения этих задач, мы организуем еще один массив — случайных чисел и при каждой генерации нового числа будем сопоставлять его с найденными ранее. Полный код, который решает эти проблемы, приведен ниже:

var i, j;
var flag; // Флажок, используемый для проверки совпадения
var banners_show = 4; // Число показываемых на страничке баннеров

var rand = new Array(banners_show-1);

Вот, практически и все, наша локальная баннерная система готова. Осталось только четыре раза вызвать функцию Show_Banner() из подходящей части странички. Нужно, только не забыть, что код JavaScript отделяется от html тегами :

Для проверки работоспособности локальной баннерной системы, несколько раз нажмите в броузере кнопку Reload и убедитесь, что каждый раз генерируются разные и не совпадающие друг с другом баннеры.

Простой JavaScript ротатор баннеров

Если Вам необходимо разместить на своем сайте более одного баннера, то в таком случае мы советуем Вам воспользоваться скриптом простого ротатора баннеров. Данный скрипт позволит Вам значительно сократить используемое под рекламу пространство Вашего сайта.

Ниже Вы можете наблюдать пример работы предлагаемого скрипта ротатора баннеров:

В результате работы скрипта ротатора баннеров, на Вашем сайте поочередно будут отображаться различные баннеры, при клике по которым пользователь будет перенаправлен на нужный сайт по соответствующей каждому баннеру ссылке.

Рассматриваемый в данной теме скрипт является немного обновленной и доработанной версией Скрипта простого ротатора баннеров, который был рассмотрен нами еще в 2011 году.

Мастер Йода рекомендует:  Напишите метод, тасующий карточную колоду

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

Для получения простого ротатора баннеров, как в примере, показанном на данной страничке, предлагаем Вам воспользоваться нашим скриптом. Для этого, в том месте Вашей странички, где Вы планируете поместить JavaScript ротатор баннеров, добавьте следующий код, описывающий первый баннер при загрузке странички:


Далее разместите JavaScript код, который будет осуществлять смену баннеров на Вашей страничке:

script type = «text/javascript» >
var URL = new Array( «news.php» , «script.php» , «useful_site.php» , «statistics.php» );
var image_ID = new Array( «image/img_1.png» , «image/img_2.png» , «image/img_3.png» ,
«image/img_4.png» );

var banner = 3 ;
var pause = 2000 ;
var flag = 0 ;

function Rotate ( image_num ) <
if ( banner == URL . length — 1 ) banner = 0 ;
else banner ++;
document . getElementById ( «banners» ). src = image_ID [ banner ];
document . getElementById ( «links» ). href = URL [ banner ];
>

window . onfocus = function()< Start_Rotate (); >
window . onblur = function()

if ( flag == 0 ) Start_Rotate ();

Все. Простейший ротатор баннеров готов к работе. Вам остается лишь указать в скрипте пути к изображениям баннеров и ссылки им соответствующие.

Взаимодействие со сторонними системами

Есть несколько вариантов работы со сторонними системами управления рекламой.

1. Баннер загружен в стороннюю систему управления рекламой, а сайт использует систему AdRiver для управления рекламным трафиком

Для стандартных баннеров (то есть тех, которые есть в интерфейсе системы) есть четыре варианта размещения кода сторонней системы управления рекламой. Для нестандартных баннеров существуют специальные инструкции по размещению.

1.1. Загрузка баннера сторонней системы управления рекламой через ссылки на креативы

  1. Добавьте баннер нужного размера и типа, напрмер, Flash 240×400, кликните по ссылке Загрузить баннер .
  2. На странице загрузки баннера в поле Флэш выберите Указать файл на стороннем сервере и впишите адрес Flash-ролика сторонней системы управления рекламой.
  3. В поле Заглушка также выберите Указать файл на стороннем сервере и впишите адрес заглушки.
  4. В поле Альтернативный клик впишите ссылку на клик по заглушке.
  5. По необходимости заполните остальные поля, нажмите Загрузить .
  6. На странице редактирования параметров баннера в поле URL ссылки: впишите ссылку на клик по баннеру сторонней системы управления рекламой.

  7. Сохраните все изменения.

Если все сделано правильно, то баннер сразу отобразится в интерфейсе. Проверьте локально, что баннер и показывается, и кликается и уточните у представителей сторонней системы управления рекламой, считаются ли у них и показы, и клики.

1.2. Загрузка баннера сторонней системы управления рекламой через Location

  1. Получите HTML-код сторонней системы для размещения на вашем сайте. Использовать JavaScript, предназначенный для защиты от кеширования не надо, AdRiver содержит собственные алгоритмы. Выберите самый простой код. Пример кода для сети M2K Banner Network:
  2. Для предотвращения кеширования добавляйте к коду случайное число — параметр &parameterName=![rnd] .
    Пример (изменения выделены красным):
  3. Добавьте баннер в рекламную кампанию.
    • Вместо прямой ссылки на сайт рекламодателя укажите http://m2k.ru/cgi-bin/t2-click//T2RB//761/![rnd]/1/ .
    • В поле Location баннера: укажите http://m2k.ru/cgi-bin/t2-requester?account=761&network=1&format=468|60&magic=![rnd]&keyword=»» .
    • В поле alt впишите M2K Banner Network .

1.3. Загрузка баннера сторонней системы управления рекламой через HTML-баннер

  1. Создайте файл следующего содержания и назовите его index.html :
  2. Добавьте в вашу рекламную кампанию HTML-баннер соответствующего размера и загрузите полученный index.html .

Важно: Имя файла обязательно должно быть index.html . Система AdRiver не будет считать клики по баннеру, загруженному таким образом.

1.4. Загрузка баннера сторонней системы управления рекламой через JavaScript-баннер

  1. Модифицируйте код сторонней системы, удалив все HTML-теги. Пример кода (нужная часть выделена красным):
  2. Сохраните оставшуюся часть кода (выделенную красным) в файл и назовите его script.js .
  3. Добавьте в вашу рекламную кампанию JavaScript-баннер и загрузите полученный script.js .


Важно: Имя файла обязательно должно быть script.js . Система AdRiver не будет считать клики по баннеру, загруженному таким образом.

  1. Код сторонней системы:
  2. Данный код необходимо преобразовать в скрипт, который можно загрузить в AdRiver, как JavaScript-баннер. Пример модифицированного кода:
  3. Сохраните код в файл с именем script.js .
  4. Добавьте в вашу рекламную кампанию JavaScript-баннер и загрузите полученный script.js .

Важно: Имя файла обязательно должно быть script.js . Система AdRiver не будет считать клики по баннеру, загруженному таким образом.

2. Баннер загружен в систему AdRiver, а сайт использует стороннюю систему управления рекламой

  1. Добавьте баннер типа redirect-flash .
  2. Загрузите Flash-ролик. Flash-ролик обязательно должен называться 0.swf .

Примечание: Все таргетинги на такой баннер настраивает сторонняя система управления рекламой. Поэтому установите распределение показов в течение дня с максимальной скоростью и не задавайте никаких ограничений.

  • Размер баннера redirect-flash влияет только на то, как баннер отображается в интерфейсе AdRiver. Размеры для баннера сторонняя система управления рекламой выставляет в своей крутилке или на рекламной площадке.
  • Получите код для конкретного баннера, нажав на кнопку рядом с номером баннера. Вам понадобится вариант кода две ссылки . Это и будут ссылки на показ и на клик для Flash-ролика.
  • Проверьте локально, для этого вставьте ссылку на показ в адресную строку браузера и кликните по баннеру. Показ и клик должны засчитаться в системе AdRiver.
  • Для заглушки добавьте баннер img width x hight и загрузите изображение. Получите ссылку на показ и на клик для заглушки.
  • Перешлите площадке для размещения четыре ссылки: ссылку на показ Flash-ролика, ссылку на клик по Flash-ролику, ссылку на показ заглушки, ссылку на клик по заглушке.

  • Размещение кода вызова AjaxJS в других системах управления рекламой.

    Локальная баннерная система Javascript

    Хотел бы поинтересоваться у знающих людей 🙂

    На сайте необходима локальная баннерная система, стоит вопрос в том, какой системамой пользоваться? При этом желательна оплата системы бартером (% от показов), насколько я понял это предлагает только AdRiver? Послал им письмо — ни ответа ни привета, вроде они в лучшей «форме» поэтому им это все по боку.

    На примете есть (были 🙂 также:

    Krutilka — только за плату
    RotaBanner — только за плату
    BannerBank — слышал, что вроде на их движке можно сделать.
    Yadro — вроде, тоже возможно .

    Баннерная система на JavaScript

    Продажа товара приостановлена.

    Попробуйте поискать похожий товар у других продавцов.

    Продавец

    Описание товара

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

    Отзывы

    С товаром «Баннерная система на JavaScript» также смотрят:

    В целях противодействия нарушению авторских прав и права собственности, а также исключения необоснованных обвинений в адрес администрации сайта о пособничестве такому нарушению, администрация торговой площадки Plati (http://www.plati.market) обращается к Вам с просьбой — в случае обнаружения нарушений на торговой площадке Plati, незамедлительно информировать нас по адресу support@plati.market о факте такого нарушения и предоставить нам достоверную информацию, подтверждающую Ваши авторские права или права собственности. В письме обязательно укажите ваши контактные реквизиты (Ф.И.О., телефон).

    Мастер Йода рекомендует:  Риски при поисковой оптимизации интернет-сайта

    В целях исключения необоснованных и заведомо ложных сообщений о фактах нарушения указанных прав, администрация будет отказывать в предоставлении услуг на торговой площадке Plati, только после получения от Вас письменных заявлений о нарушении с приложением копий документов, подтверждающих ваши авторские права или права собственности, по адресу: 123007, г. Москва, Малый Калужский пер. д.4, стр.3, Адвокатский кабинет «АКАР №380».

    В целях оперативного реагирования на нарушения Ваших прав и необходимости блокировки действий недобросовестных продавцов, Plati просит Вас направить заверенную телеграмму, которая будет являться основанием для блокировки действий продавца, указанная телеграмма должна содержать указание: вида нарушенных прав, подтверждения ваших прав и ваши контактные данные (организиционно-правовую форму лица, Ф.И.О.). Блокировка будет снята по истечение 15 дней, в случае непредставления Вами в Адвокатский кабинет письменных документов подтверждающих ваши авторские права или права собственности.

    LocalStorage на пальцах


    Один из наших читателей прислал статью с рассказом о HTML5 LocalStorage в браузерах. Передаём ему слово.

    Я постарался написать самое простое и понятное руководство по использованию технологии localStorage. Статья получилась совсем небольшой, в силу того, что и сама технология и средства работы с ней не несут ничего сложного. Для старта вам достаточно чуть-чуть знать JavaScript. Итак, уделите этой статье 10 минут и вы смело сможете добавить себе в резюме строчку «умею работать с localStorage».

    Что такое localStorage?

    Так выглядит JavaScript объект:

    А так выглядит JSON. Почти так же как обычный js-объект, только все свойства должны быть заключены в кавычки.

    Чтобы понять, что такое localStorage, просто представьте, что где-то у вас в браузере встроен такой объект, которым мы можем пользоваться. При этом данный объект не очищает значения, которые мы туда запишем, если мы перезагрузим страницу или даже совсем закроем браузер.

    Если говорить языком JavaScript, то localStorage это свойство глобального объекта браузера (window). К нему можно обращаться как window.localStorage или просто localStorage.

    Еще стоит сказать, что у браузера существует клон localStorage, который называется sessionStorage. Их разница только в том, что последний хранит данные только для одной вкладки (сессии) и просто очистит свое пространство как только мы закроем вкладку

    Helastel, удалённо, от 150 000 ₽

    Давайте посмотрим на него вживую. Например, в Google Chrome вам надо открыть DevTools (F12), перейти на вкладку «Resourses» и на левой панели вы увидите localStorage для данного домена и все значения, что оно содержит.

    Кстати, вы должны знать как localStorage работает с доменами. Для каждого домена ваш браузер создает свой объект localStorage, и редактировать или просматривать его можно только на этом домене. Например, с домена mydomain-1.com нельзя получить доступ к localStorage вашего mydomain-2.com .

    Зачем мне нужен localStorage?

    LocalStorage нужен только для одного — хранить определенные данные между сессиями пользователя. Можно придумать тысячу и одну вещь, которую можно хранить в локальном хранилище браузера. Например, браузерные игры, которые используют его как сохраненку, или записать момент, на котором пользователь остановился при просмотре видео, различные данные для форм и т.д.

    Как мне начать работать с localStorage?

    Работа с localStorage очень напоминает работу с объектами в JavaScript. Существует несколько методов для работы с ним.

    Метод который добавляет в localStorage новый ключ со значением (а если такой ключ уже существует, то перезаписывает новым значением). Пишем, например, localStorage.setItem(‘myKey’, ‘myValue’);

    Берем определенное значение из хранилища по ключу.

    Очищаем все хранилище

    Сейчас вы можете открыть вкладку с localStorage вашего браузера и самостоятельно потренироваться записывать и извлекать данные из этого хранилища. Если что – весь код пишем в js-файл.


    Также хочется отметить, что localStorage отлично работает и с вложенными структурами, например, объектами.

    Вы также должны знать, что браузеры выделяют 5мб под localStorage. И если вы его превысите — получите исключение QUOTA_EXCEEDED_ERR. Кстати, c его помощью можно проверять есть ли в вашем хранилище еще место.

    Вместо заключения

    Мне бы хотелось, чтобы из этой небольшой статьи разработчики сделали для себя простой вывод, что данная технология уже вовсю может использоваться у вас на проектах. У нее хорошая стандартизация и отличная поддержка, которая со временем только развивается.

    JavaScript и Ajax локально (без веб сервера, на локальном компьютере)

    Из-за работы бухом у меня полно документов в компьютере и я их упорядочиваю хронологически по папкам месяцев и тематически — при помощи ярлыков (ссылающихся на документы) в тематических папках. Ярлык документа может оказаться в разных папках — например и в исходящих письмах, и в папке налоговой и в папке банка, например (уведомление об открытии счета). Это все я хорошо придумал, но тематических папок до фига, поэтому я решил использовать «интернетовские» странички для их упорядочивания — типа той странички, которую Вы сейчас читаете. Ставлю там ссылки на другие странички и тематические папки. Например, корневая страничка ссылается на странички для внутренних, исходящих, входящих, двусторонних и т.п. документов; далее уже эти странички ссылаются на другие и так до тематических папок. Поэтому у меня удобная иерархическая структура документов и порядок для создания резервных копий. Но по мере пользования всей этой системой назрела необходимость в автоматизации — редактировать все эти html -странички вручную утомительно.

    Чтоб меньше редактировать, надо, чтоб странички сами «догадывались» где какие изменения возникли и обращались к свежим версиям ссылок (у меня «интернетовские» странички оглавления тоже хранятся в хронологическом порядке). А вот для этого надо, чтоб они могли «читать подсказки» из других страниц. И возникает необходимость не просто программировать при помощи JavaScript , но и читать другие документы — а тут есть проблемы, если это все не в интернете, а на локальном компьютере:

    А проблема состоит в том, что стандартный метод чтения файлов в JavaScript — это использование объекта XMLHttpRequest, который работает только с веб сервером. Запускать на локальном компе веб сервер для обращения к своим локальным страничкам — как то не хочется.

    Но нашелся обходной метод — использовать «плавающую рамку» iframe , в которую загружается проверяемая страничка и из нее уже можно извлечь всю инфу. Однако и тут возникли траблы:

    Internet Explorer ( IE — браузер Микрософт) при запуске локальных страничек с JavaScript начинает кричать, что запретил всякие там макросы и дави кнопку, если хочешь чтоб исполнились. Собсно, меня интересует как раз IE , потому что он «дружит» с Windows и по ссылке на тематическую папку забрасывает тебя в нее через Проводник.

    Но меня интересует еще и Хром ( Chrom е — браузер Гугл) — я к нему привык и если вместо тематических папок использовать «интернетовские» странички, а документами будут тоже только интернетовские странички, то он тоже годится. А это уже у меня есть идея так свой сайт перестроить по аналогии со своим бухгалтерским методом хранения документов. Так вот, Хром вообще не дает добраться до данных внутри iframe без веб сервера — это у них такая политика безопасности.

    Мастер Йода рекомендует:  Руководство по использованию плагина WordPress SEO by Yoast для новичков финал

    Больше года прошло, и наконец я нашел ответ. Для IE надо в начале «интернетовской» страницы указать вот что:

    Вот этот комментарий и снимает блокировку с выполнения макросов и освобождает от нажатия какой-то нелепой кнопки «Разрешить. «. Эта фигня, кстати, называется «Mark of the Web» — можете в поисковиках почитать подробности (например число 0014 — это длина строки » about : internet » ). Этот комментарий меняет зону безопасности с уровня локального компа на уровень интернета. А в интернете исполнять макросы можно, вот и перестает блокировка возникать.

    С Хромом решение вроде сразу нашел в интернете, но оно не работало. А состоит оно в том, что надо запускать Хром с параметром. Это не трудно автоматизировать — делаешь ярлык на Хром, задаешь параметр и корневую «интернетовскую» страницу для ее запуска. Параметр такой:

    Я в документах сделал пробный файл webworkers . html и попытался его запустить ярлыком с такой строкой внутри:

    C:\Users\Dmitgu\AppData\Local\Google\Chr ome\Application\chrome.exe —allow-file-access-from-files file:///C:/Users/Dmitgu/Documents/webwor kers.html

    Увы, сразу не заработало. Случайно наткнулся на причину: Оказывается, что надо закрыть все страницы Хрома и только после этого такой ярлык запустит Хром с возможностью читать локальные документы. А если не закрывать уже имеющиеся страницы Хрома, работающие в обычном режиме, то ярлык и новую страницу открывает как один из документов, находящийся тоже в исходном обычном режиме работы.

    Да, кстати, свою систему упорядочивания документов я называю для себя Fbase . Заведу тег в ЖЖ, наверно тут еще будет не одно продолжение.


    Простой JavaScript ротатор баннеров

    Если Вам необходимо разместить на своем сайте более одного баннера, то в таком случае мы советуем Вам воспользоваться скриптом простого ротатора баннеров. Данный скрипт позволит Вам значительно сократить используемое под рекламу пространство Вашего сайта.

    Ниже Вы можете наблюдать пример работы предлагаемого скрипта ротатора баннеров:

    В результате работы скрипта ротатора баннеров, на Вашем сайте поочередно будут отображаться различные баннеры, при клике по которым пользователь будет перенаправлен на нужный сайт по соответствующей каждому баннеру ссылке.

    Рассматриваемый в данной теме скрипт является немного обновленной и доработанной версией Скрипта простого ротатора баннеров, который был рассмотрен нами еще в 2011 году.

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

    Для получения простого ротатора баннеров, как в примере, показанном на данной страничке, предлагаем Вам воспользоваться нашим скриптом. Для этого, в том месте Вашей странички, где Вы планируете поместить JavaScript ротатор баннеров, добавьте следующий код, описывающий первый баннер при загрузке странички:

    Далее разместите JavaScript код, который будет осуществлять смену баннеров на Вашей страничке:

    script type = «text/javascript» >
    var URL = new Array( «news.php» , «script.php» , «useful_site.php» , «statistics.php» );
    var image_ID = new Array( «image/img_1.png» , «image/img_2.png» , «image/img_3.png» ,
    «image/img_4.png» );

    var banner = 3 ;
    var pause = 2000 ;
    var flag = 0 ;

    function Rotate ( image_num ) <
    if ( banner == URL . length — 1 ) banner = 0 ;
    else banner ++;
    document . getElementById ( «banners» ). src = image_ID [ banner ];
    document . getElementById ( «links» ). href = URL [ banner ];
    >

    window . onfocus = function()< Start_Rotate (); >
    window . onblur = function()

    if ( flag == 0 ) Start_Rotate ();

    Все. Простейший ротатор баннеров готов к работе. Вам остается лишь указать в скрипте пути к изображениям баннеров и ссылки им соответствующие.

    LocalStorage на пальцах

    Один из наших читателей прислал статью с рассказом о HTML5 LocalStorage в браузерах. Передаём ему слово.

    Я постарался написать самое простое и понятное руководство по использованию технологии localStorage. Статья получилась совсем небольшой, в силу того, что и сама технология и средства работы с ней не несут ничего сложного. Для старта вам достаточно чуть-чуть знать JavaScript. Итак, уделите этой статье 10 минут и вы смело сможете добавить себе в резюме строчку «умею работать с localStorage».

    Что такое localStorage?

    Так выглядит JavaScript объект:

    А так выглядит JSON. Почти так же как обычный js-объект, только все свойства должны быть заключены в кавычки.

    Чтобы понять, что такое localStorage, просто представьте, что где-то у вас в браузере встроен такой объект, которым мы можем пользоваться. При этом данный объект не очищает значения, которые мы туда запишем, если мы перезагрузим страницу или даже совсем закроем браузер.

    Если говорить языком JavaScript, то localStorage это свойство глобального объекта браузера (window). К нему можно обращаться как window.localStorage или просто localStorage.

    Еще стоит сказать, что у браузера существует клон localStorage, который называется sessionStorage. Их разница только в том, что последний хранит данные только для одной вкладки (сессии) и просто очистит свое пространство как только мы закроем вкладку

    Helastel, удалённо, от 150 000 ₽

    Давайте посмотрим на него вживую. Например, в Google Chrome вам надо открыть DevTools (F12), перейти на вкладку «Resourses» и на левой панели вы увидите localStorage для данного домена и все значения, что оно содержит.

    Кстати, вы должны знать как localStorage работает с доменами. Для каждого домена ваш браузер создает свой объект localStorage, и редактировать или просматривать его можно только на этом домене. Например, с домена mydomain-1.com нельзя получить доступ к localStorage вашего mydomain-2.com .

    Зачем мне нужен localStorage?

    LocalStorage нужен только для одного — хранить определенные данные между сессиями пользователя. Можно придумать тысячу и одну вещь, которую можно хранить в локальном хранилище браузера. Например, браузерные игры, которые используют его как сохраненку, или записать момент, на котором пользователь остановился при просмотре видео, различные данные для форм и т.д.

    Как мне начать работать с localStorage?

    Работа с localStorage очень напоминает работу с объектами в JavaScript. Существует несколько методов для работы с ним.

    Метод который добавляет в localStorage новый ключ со значением (а если такой ключ уже существует, то перезаписывает новым значением). Пишем, например, localStorage.setItem(‘myKey’, ‘myValue’);

    Берем определенное значение из хранилища по ключу.

    Очищаем все хранилище

    Сейчас вы можете открыть вкладку с localStorage вашего браузера и самостоятельно потренироваться записывать и извлекать данные из этого хранилища. Если что – весь код пишем в js-файл.

    Также хочется отметить, что localStorage отлично работает и с вложенными структурами, например, объектами.

    Вы также должны знать, что браузеры выделяют 5мб под localStorage. И если вы его превысите — получите исключение QUOTA_EXCEEDED_ERR. Кстати, c его помощью можно проверять есть ли в вашем хранилище еще место.

    Вместо заключения

    Мне бы хотелось, чтобы из этой небольшой статьи разработчики сделали для себя простой вывод, что данная технология уже вовсю может использоваться у вас на проектах. У нее хорошая стандартизация и отличная поддержка, которая со временем только развивается.

    Добавить комментарий