フロントエンドにCookieを設定する方法

今回はフロントエンドにCookieを設定する方法と、フロントエンドにCookieを設定する際の注意点を紹介します。実際のケースを見てみましょう。

Cookie

とは: クライアントのハードドライブに情報を保存する手段です。

なぜ使用するのですか? : 情報を保存し、特殊効果を実現するために使用できます。たとえば、一定の日数の間ログインを回避したり、少量のデータを保存したりできます。

Cookie 内の一部のフィールドの意味:

1. key=value (key=value) は、Cookie のキーと値のペアです。通常、対応する値はキー

2. の期限に基づいて取得されます。 (有効期限) を設定するには、Cookie の有効期限も ';' で区切ります。今日から 30 日後の日付。有効期限が設定されていない場合、ブラウザはデフォルトで Cookie を閉じて消去します。

パス Cookie はどこでも入手できるわけではありません。 Web サイトは多くのディレクトリに分割されているため、多くのディレクトリでは Cookie が使用されないため、Cookie のパスを設定すると、より安全になり、どのディレクトリも Cookie にアクセスできなくなります。 path=/E:
3. javascript

   /test を通じて、Cookie はこのディレクトリでのみ取得できます

domain (ドメイン) デフォルトでは、Cookie は Cookie が配置されているドメイン名でのみアクセスできますが、場合によってはa. chaijinsong.com は b.chaijinsong.com の下の Cookie にアクセスする必要があります。この場合、domain=chaijinsong.com を設定する必要があります。このようにして、両方のサブドメインが cookie
secure (セキュリティ) にアクセスできます。デフォルトの secure は false、つまり http プロトコルを通じて送信されますが、secure=true の場合、https

5. を通じてのみ送信できます。

使い方は？ :

document.cookie; //获取cookie
"aaa=aaa;bbb=bbb" //类似于这种格式，但是并不是字符串。
//设置cookie,也可以用来进行删除cookie，即将过期时间设置为过去的时间，最后一个参数可以传负数来实现
function setCookie(cname,cvalue,exdays){
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}
setCookie('cjs','cjs',30); //设置 name为cjs，value为cjs的一个cookie，并且时间为30天。
setCookie('cjs','cjs',-1); //让该cookie过期,然后在document.cookie中就没有cjs=cjs这个cookie了。但是其他key=value还存在
//获取某个key的cookie
function getCookie(key){
    let arr1 = document.cookie.split(';');
    for(let i=0;i<arr1.length;i++){
        let arr2 = arr1[i].split('=');
        if(key.trim() === arr2[0].trim()){
            return (arr2[1]);
        }
    }
    return "";
}
getCookie('cjs'); //因为上面已经将cjs这个cookie干掉了，所以这里得到为 ""

注: Google ブラウザでローカル HTML ファイルを開くときに、Cookie に値を直接割り当てることは許可されていませんが、Firefox では可能です。したがって、テストする場合は、まずローカルでサーバーを開き、次にローカル IP を使用してファイルにアクセスします。 Cookie 操作を実行します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイト

その他の

関連記事に注目してください。 推奨読書:

CSSを使用して卓球の格闘アニメーションを実現する

CSSを使用して卓球の格闘アニメーションを実現する

以上がフロントエンドにCookieを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。