Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера

Учимся пользоваться локальным хранилищем браузера (localStorage) — прекрасной заменой куки by Apocalypse
24.06.14, 19:14:16



Всем привет! Это первая статья на обновлённом apo-ucoz. Ушло много времени на то, чтобы немного привыкнуть к новой cms и к тому, что мы больше не зависим от uCoz. Пора оживлять проект новыми материалами и для начала я решил написать статью по использованию возможностей локального хранилища браузера

Итак, приступим. Для начала я распишу параметры, которые позволят управлять записями в локальном хранилище

localStorage.getItem(‘apoitem‘) — данный параметр позволяет получать данные записи с именем apoitem
localStorage.setItem(‘apoitem‘, ‘bublik‘) — данный параметр позволяет создать новую запись в локальном хранилище с названием apoitem и содержимым bublik. Содержимое может быть как строкой, так и цифрой или же цифровым массивом
localStorage.removeItem(‘apoitem‘) — данный параметр позволяет удалить запись с именем apoitem из локального хранилища

Давайте я покажу вам теперь, как использовать локальное хранилище на примере скрытия блока с запоминанием при клике по кнопке:
Код
<style>   
   .apolikesquare {   
   width:100px;   
   height:100px;   
   background:#ff3333;   
   display:none;   
   }   
   </style>   
   <script>   
   $(document).ready(function() {   
   if(localStorage.getItem('aposquare') != 1) {   
   $('.apolikesquare').show(); // Если в локальном хранилище нет записи или запись aposquare не равна 1, показываем блок   
   };   
   $('#apobutton').click(function() {   
   // При клике по кнопке с id = apobutton   
   if(localStorage.getItem('aposquare') == 1) {   
   localStorage.removeItem('aposquare'); // Если запись aposquare равна 1, удаляем её   
   $('.apolikesquare').fadeIn(200); // И показываем блок за 200 миллисекунд   
   } else {   
   localStorage.setItem('aposquare', 1); // В противном случае создаём запись aposquare со значением 1   
   $('.apolikesquare').fadeOut(100); // И скрываем блок за 100 миллисекунд   
   };   
   // Вот такие пироги...   
   });   
   });   
   </script>   
   <input type="button" id="apobutton" value="Жамкай меня нежно!" />   
   <div class="apolikesquare"></div>
На данном простом примере наглядно показано, как легко управлять записями в локальном хранилище браузера. Вы также можете посмотреть готовый пример, который я создал для этого урока, ЗДЕСЬ

На этом всё, удачи! Будут вопросы — комментарии к вашим услугам!

Статья подготовлена Apocalypse

ApoTeam © 2013
Категория: Статьи для вебмастера | Добавил: Apocalypse | Теги: браузера, прекрасной, by, пользоваться, Учимся, заменой, локальным, Куки, (localStorage), хранилищем
Просмотров: 841 | Загрузок: 0 | Комментарии: 4 | Рейтинг: 1.0/2
Всего комментариев: 4
0
Ошибочка тут есть в комментариях к коду:
Код
$('.apolikesquare').fadeOut(100); // И показываем блок за 100 миллисекунд
А надо наверно
Код
$('.apolikesquare').fadeOut(100); // И СКРЫВАЕМ блок за 100 миллисекунд

0
Спасибо! Исправил  happy

0
2 [ЦИТИРОВАТЬ]   [Материал]
Гений! других слов не подобрать, благодарю!!

0
1 [ЦИТИРОВАТЬ]   [Материал]
Здравствуйте, помогите оформить блог, сам не в силах..
с запоминанием и плавным открытием.

Пример:

Кнопка №1 (Открывает содержимое)
После нажатия, кнопка открыть пропадает и на ее месте появилась кнопка закрыть с содержимым.
Кнопка №2 (Закрывает содержимое)
<тут содержимое>

Имя *:
Email: