JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのdocument.cookieでドキュメントに関連付けられたCookieを取得する方法

JavaScriptでは、documentオブジェクトを使って、ドキュメントに関するあらゆる情報を扱うことができます。このオブジェクトが提供するdocument.cookieプロパティを利用すれば、現在のドキュメントに関連付けられたCookieを簡単に取得できます。なお、このプロパティへのアクセスは読み取り操作のみのため、スクリプト内の他のコードに影響を与えることはありません。

構文

document.cookieは、Cookieを「名前=値」のペアとして保持し、複数のCookieはセミコロン（;）とスペースで区切られた1つの文字列として返されます。

cookie = document.cookie;

使用例

次の例では、document.cookieを使用してドキュメントに関連付けられたCookieを取得し、その内容をページ上に出力して表示しています。

<html>
<body>
<p id="cookie"></p>
<script>
    document.getElementById("cookie").innerHTML =
    "Cookies associated with this document: " + document.cookie;
</script>
</body>
</html>

実行結果

このコードを実行すると、ブラウザに保存されているドキュメント関連のCookie一覧が以下のような形式で表示されます。

Cookies associated with this document: __gads=ID=d8f23645916eff32:T=1559194976:S=ALNI_MZiHCQMqRpHFrUORCA63QNhEZSDFg; _ga=GA1.2.1225192854.1559194940; G_ENABLED_IDPS=google; qa_user_id=djl6Z3J3YkJWd2loN0ZzTEdrWTJjQT09; PHPSESSID=3e102fc373866clf69p2583m45; __utmz=55973678.1562912992.131.8.utmccn=(referral)|utmcsr=google.com|utmcct=/|utmcmd=referral; _gid=GA1.2.694316508.1564029750; editor_font_size=14; QASESSIONID=5d73npkehf89kqcdjg4fq571a6; __utmc=55973678; __atuvc=43%7C26%2C44%7C27%2C49%7C28%2C49%7C29%2C24%7C30; __utmb=55973678; __utma=55973678.1225192854.1559194940.1564137677.1564145427.177; _gat_gtag_UA_128776493_12=1

まとめ

document.cookieを使えば、特別なライブラリやAPIなしで、JavaScriptだけでドキュメントに関連付けられたすべてのCookieを文字列として取得できます。取得した文字列はセミコロンで区切って分割・解析することで、個々のCookieの値を取り出すことが可能です。

  1. JavaScriptで画像のuseMap属性の値を取得する方法

    画像要素に設定された usemap 属性の値をJavaScriptで取得したい場合は、useMap プロパティを使用します。このプロパティは、対象の画像がどのイメージマップ（<map> 要素）に関連付けられているかを文字列として返します。以下のコードを実行すると、画像の usemap 属性の値を画面に表示できます。サンプルコード<!DOCTYPE html> <html>    <body>       <img id = "myid" src = "/imag

  2. 【JavaScript】ドキュメント全体のHTMLを文字列として取得する方法を解説

    Webページのソースコード全体を取得して処理したい場面は、デバッグや動的なコンテンツ操作など、JavaScript開発では意外と多くあります。この記事では、ドキュメント全体のHTMLを文字列として取得する方法を、具体的なコード例とともにわかりやすく解説します。 innerHTMLプロパティを使った取得方法 ドキュメント全体のHTMLを文字列として取得するには、document.documentElementのinnerHTMLプロパティを利用します。 document.documentElement.innerHTML; document.documentElementはHTML文書のルート要