jquery operation Cookie Remember user name _jquery

First, Jquery.cookie.js Introduction

Jquery.cookie.js is a jquery based plug-in, a lightweight cookie plugin that can read, write, and delete cookies.

Jquery.cookie.js can obtain source code from GitHub Https://github.com/carhartl/jquery-cookie

Introduction to the basic usage of jquery.cookie.js

jquery Operation Cookie Plug-ins, the approximate use of the following methods:

1. Read Cookie value

$.cookie (' The_cookie '); Returns Cookievalue if present, otherwise null is returned.

2. Set the value of the cookie

(1) Default settings. When no cookie time is specified, the cookie that is created is known as the session cookie by default to the user's browser shutdown.

$.cookie (' The_cookie ', ' the_value ');

(2) Set a cookie with time. When the time is specified, it is called a persistent cookie, and the valid time is days.

$.cookie (' cookiename ', ' Cookievalue ', {expires:7});

(3) Set a cookie with a path. If you do not set a valid path, by default, only the path to read the Cookie,cookie on the cookie Settings current page is used to set up a top-level directory that can read cookies.

$.cookie (' cookiename ', ' Cookievalue ', {expires:7, path: '/'});

(4) Set up cookies for a particular Web site.

$.cookie (' cookiename ', ' Cookievalue ', {expires:7, path: '/', Domain: ' souvc.com ', Secure:false, raw:false});

Parameter explanation:

1). expires:365

Defines the valid time for a cookie, which can be a number (from the time the cookie was created, in days), or a Date object. If omitted, the cookie created is a session cookie that will be deleted when the user exits the browser.

Note: By default, only the Web page that sets the cookie can read the cookie. If you want a page to read a cookie for another page setting, you must set the path of the cookie. The path to the cookie is used to set up a top-level directory that can read cookies. Set this path to the root of the Web site so that all pages can read cookies to each other (typically do not set this up to prevent conflicts).

Expires: (number | Date), you can set an integer as the validity period (in days), or you can set a Date object as the expiration date for the cookie. If the specified date is a negative number, the cookie is deleted, and if it is not set or set to NULL, the cookie is treated as a session cookie and deleted after the browser is closed.

var cookie_name = ' username ';
if ($.cookie (Cookie_name)) {
$ ("#username"). Val ($.cookie (Cookie_name));
$ ("#check"). Click (function () {
if (this.checked) {
$.cookie (cookie_name, $ ("#username"). Val (), {path: '/', Expires:10});
var date = new Date ();
Date.settime (Date.gettime () + (3 * 24 * 60 * 60 * 1000)); Three days later this time expires
//$.cookie (Cookie_name, $ ("#username"). Val (), {path: '/', expires:date});
else{
$.cookie (cookie_name, NULL, {path: '/'});//delete Cookie
}
});

2). Path: '/'

By default: Only the Web page that sets the cookie can read the cookie. Defines a valid path for a cookie. By default, the value of this parameter is the path of the Web page where the cookie was created (the behavior of the standard browser). If you want to access this cookie throughout the site, you need to set a valid path: path: '/'.

If you want to delete a cookie that defines a valid path, you need to include this path when calling the function: $.cookie (' The_cookie ', NULL, {path: '/'});. Domain: ' example.com ' default value: The domain name owned by the Web page that created the cookie.

3. Domain: Create the domain name of the Web page where the cookie resides;

4. Secure: Default is False, if the transport protocol for True,cookie is Https;raw: Default to False, automatically encode and decode when reading and writing (using encodeURIComponent encoding, Use decodeuricomponent decoding) to turn off this feature, set to true.

3. Delete Cookies.

$.cookie (' The_cookie ', null); Delete a cookie

$.cookie (' CookieName ', Null,{path: '/'}); Note: If you want to delete a cookie with a valid path

Iii. Methods of Use

First contains the library file for jquery, followed by the Jquery.cookie.js library file.

<script type= "Text/javascript" src= "Js/jquery-1.6.2.min.js" ></script> 

Iv. brief description.

1. Page effect

2. JSP page:

<input type= "text" class= "Lr-input" placeholder= "mobile phone number/username" style= "width:255px" id= "username" name= "username" value = "" "/> <input type=" password "class=" lr-input "placeholder=" Please enter login password "style=" width:255px "id=" password "name=" Password "/> 
<div class=" Lr-formwrap fn-clear "> <p class=" lr-remuser fn-left "id=" Remuserselect "
><i class= "Icon-check" ></i> remember user </p>

3. CSS style:

. lr-remuser {
color: #9d9d9d;
Cursor:pointer;
font-size:14px;
line-height:25px;
padding-left:30px;

4. JS implementation

Reads whether the nickname if
($.cookie ("rmbuser") = = "true") {
$ ("#remUserSelect") is read by status. AddClass ("active"); Then give the selected flag
$ ("#username"). Val ($.cookie ("nickname"));//Record account 
number}//Verify remember account
function Vailremembernickname () {
if ($ ("#remUserSelect"). Hasclass ("active") {
var nickname = $ ("#username"). Val ();
$.cookie ("Rmbuser", "true", {expires:7}); Store a 7-day cookie
$.cookie ("nickname", nickname, {expires:7});//Store a cookie with a 7-day period
}else {
$.cookie ("Rmbuser", "false", {Expires:-1});
$.cookie ("nickname", "", {Expires:-1});
}

5. Then call this method when you click Login.

Login Submit Form
$ ("#login-submit"). On ("click", Function () {
var form = $ ("#loginForm");
if (!vailphone ()) return;
if (!vailpwd ()) return;
Vailremembernickname ();
Form.submit ();

6. Login View Browser console effect is as follows:

7. When you exit login, you can see the effect of the login box:

The above content is small series to introduce the jquery operation cookies to remember the user name of the relevant instructions, I hope to help you!