クッキーとは何ですか？JavaScriptを使用してクッキーを操作する方法

🧁🧁🧁完全ではありません…🍪🍪🍪より良いです！クッキー🍪はウェブで人気の絵文字の1つであり、ウェブで最も重要なテクノロジーの1つでもあります。

それが何であるかを見てみましょう。

ブラウザCookieの基本

ユーザーに関する永続的な情報を保持するために、ブラウザのCookieがWebに導入されました。最初の使用例は、ユーザーがすでにNetscapeのWebサイトにアクセスしたかどうかを確認することでした。

Cookieは、名前フィールド、値フィールド、および追加のオプション属性を持つ文字列です。値は文字列であり、アプリケーションに最適と思われるものは何でも保存できます。 GoogleAnalyticsの_gaは、おそらくone of || theで最も一般的なCookieであり、通常は次のようになります。

名前：_ga
値：GA1.3.210706468.1583989741
ドメイン：.example.com
パス：/
期限切れ/最大年齢：2022-03-12T05：12：53.000Z

Cookieは、最大4096バイトのデータを保存できます（これには、名前、値、ドメイン、有効期限など、そこに収まるものは何でも含まれます）。ドメインごとに限られた数のCookieを追加できますが、これはブラウザによって異なります。

クッキーはどのように作成されますか

Cookieを作成する主な方法は2つあります。

HTTP を使用すると、HTTP応答ヘッダーでSet-Cookieを送信できます。 Webサーバーに使用しているテクノロジーによって異なります。さまざまなツールやライブラリを使用して、Cookieヘッダーを管理できます。これらのツールは、おおよそ次のようなHTTP応答を作成する必要があります。

HTTP/2.0 200 OK
Content-type: text/html
Set-Cookie: alligator_name=barry
Set-Cookie: tasty_cookie=strawberry
... More http Content

有効期限や、SecureディレクティブやHttpOnlyフラグなどのセキュリティ機能などの情報をCookieに追加できます。

Set-Cookie: cookie_name=cookie_value; Expires=Wed, 17 Sep 2021 07:00:00 GMT; Secure; HttpOnly

HttpOnly フラグは、ブラウザがCookieを読み取ったり変更したりできないことを意味します。また、セキュアとは、CookieをHTTPS経由でのみ転送できることを意味します。これらは、アプリケーションを保護するために非常に重要です。

Javascript を使用すると、Cookieの管理が少し難しくなります。 document.cookieという1つのインターフェースがあり、Cookieを保存して再割り当てできます。たとえば、Google Analyticsがインストールされているサイトで、開発者コンソールで次のことができます。

console.log(document.cookie)
// logs something like "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741"

// This equal sign does not work as you expect
document.cookie = "alligator=alligator_cookie_content;"
console.log(document.cookie)
// logs "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; alligator=alligator_cookie_content"
// Notice that the previous piece of code appends the new cookie we created

// A rough implementation of a cookie interface could look like this:
const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
// For a real update we would first check if the cookie exists
const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
const deleteCookie = (name) => document.cookie = name + '=; Max-Age=-1;';

クッキーの種類

セッションCookie

セッションCookieは、多くの場合、ブラウザが閉じられるまで存在するCookieの種類を指します。セッションCookieを設定するには、有効期限を指定する必要はありません。

たとえば、ユーザーの名前をCookieに保存できます。 Cookieにアクセスできる人は誰でも、ユーザーの名前にアクセスできます。 Cookieに含まれているため、リクエストに追加する必要はありません。

Session cookiesは紛らわしい表現です。セッションCookieは、セッションの管理に使用するCookieも指します。ブラウザを閉じたときに削除されるCookieは、セッション管理に使用できるCookieだけではありません。

永続的なCookie

永続的なCookieは、ユーザーがCookieを閉じたときにブラウザによって削除されません。これらのCookieには、サーバーで設定できる有効期限があります。 1日または10年で期限切れになるようにCookieを設定できます。

サードパーティのCookie

同じドメインにあるCookieを、サードパーティプロバイダーからのCookieと区別することができます。以前にGoogleAnalyticsで示した例は、サードパーティのCookieの例です。サードパーティのCookieを使用して、ユーザーのアクティビティを追跡できます。サードパーティのCookieを設定するには、';domain=thirdpartydomain.com'を設定する必要があります。

CookieMax-年齢と有効期限

通常、Cookieは一時的なものであるため、正確な有効期限を設定することをお勧めします。 2つの戦略があります。

Expiresを使用して、固定の有効期限を設定します。日付はHTTP日付形式<day-name>, <day> <month> <year> <hour>:<minute>:<second> GMTを使用します。たとえば、Cookieの有効期限が2020年9月17日になるようにするには、次のようにします。

const jacksBirthday = new Date(2020, 8, 17);
document.cookie = 'jacksage=27; expires =' + jacksBirthday.toUTCString() + ';';

「Max-Age」の使用は、すべてのブラウザでサポートされているわけではありません。しかし、それは最も健全な解決策です。これは、クライアントがCookieを受信した後、Cookieを一定の時間（秒単位）で強制的に期限切れにします。

// Expires after one day
const oneDayToSeconds = 24 * 60 * 60;
document.cookie =  'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

🍪それだけです！これで、JavaScriptを使用してクライアント側でCookieを使用する方法についてより良いアイデアが得られたことを願っています。ご不明な点がございましたら、Twitterでお問い合わせください。次回は、CookieとExpress.jsを使用してセッションを管理する方法を説明します。