ホームページ > ウェブフロントエンド > jsチュートリアル > jsでのCookieの読み書き操作例を詳しく解説

jsでのCookieの読み書き操作例を詳しく解説

PHPz
リリース: 2018-09-29 14:54:33
転載
1167 人が閲覧しました

Cookie には有効期間があります。Cookie のデフォルトの有効期間は、Cookie が生成されてからブラウザが閉じられるまでです。ユーザーは、Cookie の有効期間を設定して有効期限を指定することもできます。 Cookie を手動で削除するか、Cookie を手動で削除します。

Cookie は、コンピュータのハード ドライブに保存されるキーと値のペアの文字列である小さな情報です。Cookie の記憶容量は、ブラウザのメーカーによって若干異なります。 Cookie サイズの制限; Cookie の主な本質は、それを識別することによって何かを行う「識別」です。Cookie は、ハードドライブから他のデータを取得したり、コンピューター ウイルスを送信したり、電子メール アドレスを取得したりすることはできません。 Cookie には有効期間があります。Cookie のデフォルトの有効期間は、Cookie の有効期間を設定するか、手動で無効にすることによって有効期限を指定することもできます。クッキーを削除します。

Cookie は特定の形式の文字列およびテキスト文字列です

形式:

cookieName=cookieValue;expires=expiresDate;
path=URLpath;
domain=siteDomain
//cookie名称,失效日期,储存URL,储存域值;
ログイン後にコピー

Cookie の作成方法

私たちは通常、Cookie の設定を関数にカプセル化します。

function addCookie(sName,sValue,day) { 
var expireDate = new Date(); 
expireDate.setDate(expireDate.getDate()+day);; 
//设置失效时间 
document.cookie = escape(sName) + '=' + escape(sValue) +';expires=' + expireDate.toGMTString();6 //escape()汉字转成unicode编码,toGMTString() 把日期对象转成字符串 
}
ログイン後にコピー

Cookie を読み取る

Cookie を追加した後、それを取得するにはどうすればよいでしょうか?シンプル:

function getCookies() { 
var showAllCookie = ''; 
if(!document.cookie == ''){ 
var arrCookie = document.cookie.split('; '); 
//用spilt('; ')切割所有cookie保存在数组arrCookie中 
var arrLength = arrCookie.length; 
for(var i=0; i<arrLength; i++) { 
showAllCookie += &#39;c_name:&#39; + unescape(arrCookie[i].split(&#39;=&#39;)[0]) + &#39;c_value:&#39; + unescape(arrCookie[i].split(&#39;=&#39;)[1]) + &#39;<br>&#39; 9 } 
return showAllCookie; 
} 
}
ログイン後にコピー

Cookie には有効期限があり、自動的に削除することも、有効期限を設定してすぐに削除することもできます。

これも非常に簡単です。続行します。 :

function removeCookie() { 
if(document.cookie != &#39;&#39; && confirm(&#39;你想清理所有cookie吗?&#39;)) { 
var arrCookie = document.cookie.split(&#39;; &#39;); 
var arrLength = arrCookie.length; 
var expireDate = new Date(); 
expireDate.setDate(expireDate.getDate()-1); 
for(var i=0; i<arrLength; i++) { 
var str = arrCookie[i].split(&#39;=&#39;)[0]; 
document.cookie = str+ &#39;=&#39; + &#39;;expires=&#39; + expireDate.toGMTString(); 
} 
} 
}
ログイン後にコピー

Cookie の作成、取得、削除の方法はすでにわかりました。次は Cookie を使用します。

Cookie を使用して簡単なタイマーを作成しましょう:

var cookieCount = {}; 
cookieCount.count = function () { 
var count = parseInt(this.getCount(&#39;myCount&#39;)); 
count++; 
document.cookie = &#39;myCount=&#39; + count + &#39;&#39;; 
alert(&#39;第&#39;+count+&#39;访问&#39;); 
} 
cookieCount.setCount= function () { 
//首先得创建一个名为myCount的cookie 
var expireDate = new Date(); 
expireDate.setDate(expireDate.getDate()+1); 
document.cookie = &#39;myCount=&#39; + &#39;0&#39; +&#39;;expires=&#39; + expireDate.toGMTString(); 
} 
cookieCount.getCount = function (countName) { 
//获取名为计数cookie,为其加1 
var arrCookie = document.cookie.split(&#39;; &#39;); 
var arrLength = arrCookie.length; 
var ini = true; 
for(var i=0; i<arrLength; i++) { 
if(countName == arrCookie[i].split(&#39;=&#39;)[0]){ 
return parseInt(arrCookie[i].split(&#39;=&#39;)[1]); 
break; 
}else{ 
ini = false; 
} 
} 
if(ini == false)this.setCount(); 
return 0; 
} 
cookieCount.count();
ログイン後にコピー

Cookie パス

Cookie パスは、この記事の冒頭で説明しました: path=URL; Cookie が作成された場合。ドメイン名のサブディレクトリ、ドメイン名および他のこの Cookie は、同じレベルのディレクトリまたは上位レベルのディレクトリからはアクセスできません。パスを設定する利点は、ドメイン名およびドメイン名のサブカテゴリ ディレクトリにアクセスできることです。次のように:

document.cookie=&#39;cookieName=cookieValue;expires=expireDate;path=/&#39;
ログイン後にコピー
cookie Domain

ドメインの設定:domain=siteDomain

これは主に同じドメイン内で Cookie を共有するために使用されます。 、「www.taabao.com」と「ued.taabao.com」など 「この 2 つはドメイン名「taabao.com」を共有しています。「www.taabao.com」の Cookie に「ued」がアクセスできるようにしたい場合.taabao.com" の場合、パス属性を "/" に設定し、Cookie のドメインを設定する必要があります -->document.cookie='cookieName=cookieValue;expires=expireDate;path=/;domain=taobao .com」。

Web プロジェクトの継続的な開発により、HTML5 では window.sessionStorage と window.localStorage という 2 つのプロパティが提供され、setItem、getItem、removeItem、clear などのメソッドが実装され、データをローカルに保存できるようになりました。操作がより簡単で便利になりました。

上記はこの章の全内容です。その他の関連チュートリアルについては、

JavaScript ビデオ チュートリアル

をご覧ください。

関連ラベル:
ソース:jb51.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート