Веб-браузери можуть генерувати унікальні сесії, призначені для кожного користувача на сайті. Найчастіше цей процес реалізований у внутрішньому інтерфейсі за допомогою таких мов як PHP або Ruby, але ми також можемо використовувати cookie-сесії на зовнішньому інтерфейсі за допомогою j # 097; vascript. Існує безліч посібників, в яких розповідається про те, як генерувати чисті JS-cookie. Але нова jQuery-бібліотека Cookies в значній мірі спрощує процес.
Дозвольте нам розповісти, як за допомогою jQuery Cookies можна реалізувати дуже просту систему аутентифікації. Весь код буде представлений на зовнішньому інтерфейсі, але для того, щоб побачити результати роботи, вам знадобиться live-сервер для тестування. Браузерні cookies будуть створювати на локальний IP, запропонований веб-сервером, а це значить, що на жаль ви не зможете запускати ці скрипти локально. Не забудьте ознайомитися з live-демо, щоб зрозуміти, про що піде мова.
Для початку ми створимо приблизний HTML5-документ з єдиною посиланням на бібліотеку jQuery, а також з функцією jQuery Cookies. Ви можете завантажити їх безпосередньо з Github Repo. і єдиний файл, який нам знадобиться, це jquery.cookie.js.
Вміст внутрішнього елемента
CSS-стилі не так вже й заплутані, але було б непогано вдатися до деяких подробиці. Ми створили глянсову CSS3-кнопку, скориставшись порадами з керівництва Codepen. Ці стилі досить розгорнуті, і їх слід зберегти для повторного використання і в інших проектах.
Ми також змінили стандартні елементи введення таким чином, щоб вони краще поєднувалися зі сторінкою. Контейнер з деталями логіна позначений властивістю display: none, так що він не займе місця на згенерованої сторінці. Тим не менш, він як і раніше становить активну частину DOM, і це значить, що ми можемо управляти значенням display за допомогою jQuery. Тепер давайте поглянемо в даний jQuery-код, розташований на дні сторінки, відразу перед закриває тегом body.
Cookies в jQuery
Плагін пропонує нам кілька стандартних функцій, яким може знадобитися набагато більше логіки в звичайному j # 097; vascript. Тут представлені заздалегідь підготовлені внутрішні методи для виклику нових cookie і видалення існуючих. Давайте поглянемо на відкриває блок коду, щоб зрозуміти, що тут відбувається: