Jquery は cookie を操作して username_jquery を記憶します

1. jquery.cookie.js の概要

jquery.cookie.js は jquery ベースのプラグインで、Cookie の読み取り、書き込み、削除ができる軽量の Cookie プラグインです。

jquery.cookie.js は Github https://github.com/carhartl/jquery-cookie からソース コードを取得できます

2. jquery.cookie.js の基本的な使い方の紹介

Cookieを操作するjQueryプラグイン、おおよその使用方法は以下のとおりです。

1. Cookie 値を読み取ります

$.cookie('the_cookie'); //存在する場合は cookieValue を返し、存在しない場合は null を返します。

2. Cookie の値を設定します

(1) デフォルト設定。 Cookie の時刻が指定されていない場合、作成された Cookie はデフォルトでユーザーのブラウザが閉じるまで有効であるため、セッション Cookie と呼ばれます。

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

(2) 時間を指定してクッキーを設定します。 時間を指定した場合は永続クッキーと呼ばれ、有効期限は日数となります。

$.cookie('cookieName','cookieValue', {有効期限：7});

(3) Cookieにパスを設定します。有効なパスが設定されていない場合、デフォルトでは、Cookie 設定の現在のページでのみ Cookie を読み取ることができます。Cookie のパスは、Cookie を読み取ることができる最上位ディレクトリを設定するために使用されます。

$.cookie('cookieName','cookieValue', {有効期限：7, パス：'/'});

(4) 特定の Web サイトに Cookie を設定します。

$.cookie('cookieName','cookieValue',{有効期限：7, パス：'/' , ドメイン: 'souvc.com' , セキュア: false , raw:false});

パラメータの説明:

1).有効期限: 365

Cookie の有効期間を定義します。値は数値 (Cookie の作成時からの日数) または Date オブジェクトです。省略した場合、作成される Cookie はセッション Cookie となり、ユーザーがブラウザを終了すると削除されます。

//注: デフォルトでは、Cookie を設定する Web ページのみが Cookie を読み取ることができます。別のページによって設定された Cookie をページで読み取れるようにする場合は、Cookie のパスを設定する必要があります。 Cookie へのパスは、Cookie を読み取ることができる最上位ディレクトリを設定するために使用されます。このパスを Web サイトのルート ディレクトリに設定すると、すべての Web ページが相互に Cookie を読み取れるようになります (競合を防ぐために、通常はこれを設定しません)。

expires: (数値 | 日付) 有効期間。有効期間 (単位: 日) として整数を設定することも、Cookie の有効期限として日付オブジェクトを設定することもできます。指定された日付が負の数値の場合、この Cookie は削除されます。設定されていない場合、または null に設定されている場合、この Cookie はセッション Cookie として扱われ、ブラウザーが閉じられた後に削除されます。

2).path: '/'

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)); //三天后的这个时候过期
//$.cookie(COOKIE_NAME, $("#username").val(), { path: '/', expires: date });
}else{
$.cookie(COOKIE_NAME, null, { path: '/' }); //删除cookie
}
});

デフォルト: Cookie を設定する Web ページのみが Cookie を読み取ることができます。 Cookie の有効なパスを定義します。デフォルトでは、このパラメータの値は Cookie を作成した Web ページへのパスです (ブラウザの標準動作)。 Web サイト全体でこの Cookie にアクセスしたい場合は、パス: '/' のように有効なパスを設定する必要があります。

有効なパスを定義する Cookie を削除したい場合は、関数 $.cookie('the_cookie', null, { path: '/' }); を呼び出すときにこのパスを含める必要があります。ドメイン: 'example.com' デフォルト値: Cookie を作成した Web ページのドメイン名。

3) ドメイン: Cookie が作成される Web ページが所有するドメイン名。

4). secure: デフォルトは false、true の場合、Cookie 送信プロトコルは https である必要があります; raw: デフォルトは false、読み取りおよび書き込み時に自動的にエンコードおよびデコードされます (エンコードには encodeURIComponent を使用し、デコードには decodeURIComponent を使用します) )、この機能をオフにするには、true に設定してください。

3. Cookie を削除します。

$.cookie('the_cookie', null) //クッキーを削除します

$.cookie('cookieName',null,{path:'/'}); //注: 有効なパスを持つ Cookie を削除する場合

3.

の使い方 最初に jQuery ライブラリ ファイルをインクルードし、次に jquery.cookie.js ライブラリ ファイルをインクルードします。

4. 簡単な説明。

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script> 

1. ページ効果

2. JSP ページ:

3. CSS スタイル:

<input type="text" class="lr-input" placeholder="手机号码/用户名" style="width:255px" id="username" name="username" value=""/> <input type="password" class="lr-input" placeholder="请输入登录密码" 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>记住用户</p>
<a href="javascript:void(0)" id="login-submit" class="lr-submit">登录</a> 

4.js実装

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

5. クリックしてログインするときにこのメソッドを呼び出します。

//按照状态读取是否显示昵称
if ($.cookie("rmbUser") == "true") {
$("#remUserSelect").addClass("active");//如果是选中，那么给上选中的标志
$("#username").val($.cookie("nickName"));//记录账号
} 
//验证记住帐号
function vailRememberNickName(){
if($("#remUserSelect").hasClass("active")){
var nickName = $("#username").val();
$.cookie("rmbUser", "true", { expires: 7 }); // 存储一个带7天期限的 cookie
$.cookie("nickName", nickName, { expires: 7 }); // 存储一个带7天期限的 cookie
}else {
$.cookie("rmbUser", "false", { expires: -1 });
$.cookie("nickName", '', { expires: -1 });
}
} 

6. Log in to view the browser console effect as follows:

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

The above content is the relevant instructions of Jquery operating cookies to remember user names introduced by the editor. I hope it will be helpful to everyone!