web-dev-qa-db-ja.com

クッキーの有効期限の読み取り

JavaScriptを使用してCookieの有効期限を読み取ることはできますか？

はいの場合、どのように？そうでない場合、私が見ることができるソースはありますか？

javascripthtmlxhtmlcookies
46
DarthVader

JavaScriptを介してCookieの有効期限を取得することはできません。キーと値のペアのみがdocument.cookieを通じて公開されます。

51
Daniel Vandersluis

Chrome=を使用している場合は、[開発者ツール]内の[アプリケーション]タブに移動し、左側のサイドバーで[Cookies]を見つけます。そこから、設定されたCookieを確認しているドメインを選択します。そのドメインに関連付けられたCookieのリストとその有効期限が表示されます。

8
skribbz14

この論争に気付く人もいますが、1つの解決策は、同時に別のCookieを作成し、作成された元のCookieと並行してタイム/スタンプをそれに保存することです。両方を同時に更新すると、新しいCookieから簡単に時刻を取得できます（または、ソースCookieに時刻/スタンプを追加します）。

これが論争になる理由は、長年にわたり、ユーザーのPCにCookieを保存するという考えは、ユーザーのスペースを占有しているために人気がないためです。ただし、小さなタイムスタンプCookieがあまりにも恐ろしいのではないかと本当に思っています。

時間が経過した場合、ブラウザはそのCookieが利用可能であることを報告しないことを覚えておく価値があります。ブラウザにはCookieが表示されている可能性がありますが、JSがCookieにアクセスしようとすると、アクセスできなくなります。

さらに、FirefoxのWebDeveloperツールバーに合格したCookieが表示されますが、Firefox>プライバシー設定で正しく更新されます。

2
Antony

Cookieの設定も制御する場合、OPの質問に対する回避策があります。私はそれをこのようにします：

function setCookie(name, value, expiryInDays) {
  const d = new Date();
  d.setTime(d.getTime() + expiryInDays * 24 * 60 * 60 * 1000);

  document.cookie = `${name}=${value}_${d.toUTCString()};expires=${d.toUTCString()}`;
}

function showCookies() {
  if (document.cookie.length !== 0) {
    const allCookies = document.cookie.split(/;\s*/);
    const wrapper = document.getElementById('allCookies');

    wrapper.innerHTML = allCookies.reduce((html, cookie, index) => {
      const cookieParts = cookie.split('=');
      const cookieValueParts = cookieParts[1].split('_');
      const cookieHtml = [
        `<b>${index + 1}</b>`,
        `Cookie name: ${cookieParts[0]}`,
        `Cookie value: ${cookieValueParts[0]}`,
        `Expires: ${cookieValueParts[1] || 'unknown'}`
      ].join('<br>');
      return html + `<p>${cookieHtml}</p>`;
    }, '');
  }
}
<button onclick="showCookies()">Show me the cookies!</button>
<div id="allCookies"></div>
0
Dennis Munding

Cookieが設定されているコードを制御できる場合は、有効期限をブラウザのローカルストレージに保存して後で取得するためのコードを追加できます。例えば：

// set cookie with key and value to expire 30 days from now
var expires = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000);
document.cookie = [
    "key=value",
    "expires=" + expires.toUTCString()
].join("; ");

// store cookie expiration date for key in local storage
if (window.localStorage) {
    localStorage.setItem("keyExpires", expires.toISOString());
}

後で、ローカルストレージでCookieの有効期限が切れたときに検索できます。例えば：

var expires = localStorage.getItem("keyExpires");

現在、ローカルストレージは幅広いサポートを提供しています。

https://caniuse.com/#feat=namevalue-storage

0
Keith Shaw

これを行うもう1つの方法は、有効期限をCookieの本文に書き込み、そこから再度読み取って、後続の書き換えを行うことです。私はこれを素晴らしい js-cookies ライブラリと連携させるようにしました。

設定は次のようになります。

_// Set cookie expiration as a number (of days)
var paywallDuration = 30;

// When you set the cookie, add the `expires` key/value pair for browsers
// Also add `expirationDate` key/value pair into JSON object
Cookies.set('article-tracker', {
  expirationDate : paywallDuration,
  totalArticlesRead: 1
}, {
  expires : paywallDuration,
  domain : 'example.com'
});
_

この方法では、Cookieの読み取りと書き換えは簡単です。 js-cookieのgetJSON()メソッドを使用して、設定した有効期限を読み取ります。次に、Cookieを書き換えるときにその日付を2回使用します-もう一度JSONオブジェクトで、次にexpiresを使用してブラウザーで：

_var existingPaywallDuration = Cookies.getJSON('article-tracker').expirationDate;

Cookies.set('article-tracker', {
  expirationDate: existingPaywallDuration,
  totalArticlesRead: 4
}, {
  expires : existingPaywallDuration,
  domain : 'example.com'
});
_
0
staypuftman