開発者ドキュメント

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

getdocs

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

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

ブラウザCookieの基本

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

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

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

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

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

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経由でのみ転送できることを意味します。 これらは、アプリケーションを保護するために非常に重要です。

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には、サーバーで設定できる有効期限があります。 1日または10年で期限切れになるようにCookieを設定できます。

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

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

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

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

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

モバイルバージョンを終了