Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера |
Учимся пользоваться локальным хранилищем браузера (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 | |
Просмотров: 853 | Загрузок: 0 | Комментарии: 4 | |
Всего комментариев: 4 | |||||
| |||||