JavaScript で名前で Cookie を取得する

Waqar Aslam 2023年10月12日
JavaScript で名前で Cookie を取得する

Cookie は、非常に小さなテキスト ファイルの形式でコンピューターに保存される情報の断片です。 Web サーバーが Web ページをブラウザーに送信し終えると、2つの間の接続が切断され、サーバーはユーザーに関する情報をすぐに忘れます。

クッキーは、次の理由から、ユーザーに関する情報をどのように記憶するかという問題の解決策として最初に開発されました。

  1. ユーザーが特定の Web サイトを訪問するたびに、そのユーザーの名前を Cookie に保存できます。
  2. ユーザーが後で Web サイトに戻ったときに、Cookie はユーザーの名前を記憶します。

最初に、getACookie と呼ぶ関数を作成し、メソッドの引数として cookieName を使用します。

次に、nameOfCookie として参照する変数を作成し、cookieName + '=' を検索するテキストを入力します。

let nameOfCookie = cookieName + '=';

cookieDecoded という名前の新しい変数を作成したので、decodeURIComponent プロパティを使用して Cookie 文字列をデコードします。

以前は、document.cookie を使用してすべての Cookie を取得し、$ などの特殊文字を処理していましたが、代わりにこの新しい変数を使用します。

Document プロパティ Cookie を使用することで、ドキュメントに関連付けられた Cookie を読み書きすることができます。 これは、保存されている Cookie の実際の値のゲッターおよびセッターです。

let cookieDecoded = decodeURIComponent(document.cookie);

.split(';') プロパティを使用して Cookie を ; で配列に分割した後に生成された配列を保持する cookieArray という新しい変数を作成します。 キャラクター。

let cookieArray = cookieDecoded.split(';');

さらに進んで、cookieArray を反復処理します。

for (let i = 0; i < cookieArray.length; i++) ```

ループ内で、`cIndex` として参照する新しい変数を作成します。 この変数は、`i` の値によって決定される `cookieArray` の特定のインデックスの値を保持します。

```javascript
let cIndex = cookieArray[i];

charAt() 属性は、cIndex 配列のインデックス 0 にある文字の値を調べて、それが空かどうかを判断する while ループを開始します。

while (cIndex.charAt(0) == ' ') ```

`cIndex` の最初のインデックスが空の場合、`subString()` プロパティを使用して、2 番目のインデックスの値が `cIndex` 変数に格納されます。

```javascript
cIndex = cIndex.substring(1);

cIndex.indexOf(nameOfCookie) から受け取った値がゼロに等しい場合、条件が満たされ、cIndex から取得した値を返します。

if (cIndex.indexOf(nameOfCookie) == 0) ```

<!--adsense-->

条件が `true` と評価された場合、`c.substring function (name.length, c.length)` で表される Cookie の値を返します。 また、条件が `false` であることが判明した場合は、空の文字列を返します。

```javascript
{ return cIndex.substring(nameOfCookie.length, cIndex.length); }
return '';

完全なソース コード:

function getACookie(cookieName) {
  let nameOfCookie = cookieName + '=';
  let cookieDecoded = decodeURIComponent(document.cookie);
  let cookieArray = cookieDecoded.split(';');

  for (let i = 0; i < cookieArray.length; i++) {
    let cIndex = cookieArray[i];
    while (cIndex.charAt(0) == ' ') {
      cIndex = cIndex.substring(1);
    }
    if (cIndex.indexOf(nameOfCookie) == 0) {
      return cIndex.substring(nameOfCookie.length, cIndex.length);
    }
  }
  return '';
}
著者: Waqar Aslam
Waqar Aslam avatar Waqar Aslam avatar

I am Waqar having 5+ years of software engineering experience. I have been in the industry as a javascript web and mobile developer for 3 years working with multiple frameworks such as nodejs, react js, react native, Ionic, and angular js. After which I Switched to flutter mobile development. I have 2 years of experience building android and ios apps with flutter. For the backend, I have experience with rest APIs, Aws, and firebase. I have also written articles related to problem-solving and best practices in C, C++, Javascript, C#, and power shell.

LinkedIn

関連記事 - JavaScript Cookies