[解決済み】JavaScriptでクッキーを名前で読み取るための最短関数は何ですか?
質問
JavaScriptでCookieを読み取るための、最短で、正確で、クロスブラウザに互換性のある方法は何ですか?
スタンドアローンのスクリプト(外部との依存関係がない)を作っているときに、クッキーを読み取る関数を追加することがよくありますが、大抵は
QuirksMode.org
readCookie()
メソッド(280バイト、最小化216バイト。)
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
それは仕事をしますが、醜く、毎回かなり肥大化します。
というメソッドは jQuery.cookie はこのようなものを使っています (modified, 165 bytes, 125 minified)。
function read_cookie(key)
{
var result;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? (result[1]) : null;
}
備考 これは「コードゴルフ」の大会ではありません。私は、readCookie関数のサイズを小さくすることと、私が持っているソリューションが有効であることを確認することに、正真正銘の興味があります。
解決方法は?
現在のベストアンサーより短く、より信頼性が高く、より高性能である。
const getCookieValue = (name) => (
document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || ''
)
様々なアプローチによる性能比較を示します。
http://jsperf.com/get-cookie-value-regex-vs-array-functions
アプローチに関する注意点
正規表現によるアプローチは、ほとんどのブラウザで最速であるだけでなく、最短の関数を生成します。加えて、以下のように 公式仕様書 (RFC 2109) document.cookieのcookieを区切るセミコロンの後のスペースはオプションであり、これに依存すべきではないという主張が成り立つかもしれません。さらに、等号(=)の前後にはホワイトスペースが許され、この潜在的なホワイトスペースは信頼できる document.cookie パーサーに考慮されるべきであるという主張ができます。上記の正規表現は上記の両方の空白の条件を考慮に入れています。
関連
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み] テスト
-
[解決済み】React、Uncaught ReferenceError。ReactDOMは定義されていません
-
[解決済み】Syntax error: JavaScriptの不正なreturnステートメント
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み】JavaScript版sleep()とは?)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】このエラーの原因は何ですか - "Fatal error: ローカルgruntを見つけることができません"
-
[解決済み] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングした
-
[解決済み】NodeJS "ESモジュールをロードするためにインポートを使用する必要があります。"
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み】JavaScriptで相対URLへのリダイレクトを行う
-
[解決済み】Jestが予期しないトークンに遭遇した
-
[解決済み】Vueが定義されていない
-
[解決済み] jQueryでクッキーを設定/解除するにはどうすればよいですか?
-
[解決済み] PHPからJavaScriptに変数やデータを渡すにはどうしたらよいですか?
-
[解決済み】Cookieに使用できる文字は何ですか?