jquery.cookieについて

jquery.cookieを使用しcookieに値を保存しています。
ページロード時に保存したcookieを確認してhogehogeしたいのですが、
確かにcookieは保存されているものの、console.logで表示してもundefinedとなってしまいます。

オプションなどの影響があるのでしょうか？

■環境
スマホ
※cookieの挙動確認は、chrome（PC）でおこなっています。

■使用プラグイン
jQuery Cookie Plugin v1.4.0
（https://github.com/carhartl/jquery-cookie）

■セット方法

$.cookie.json = false;
$.cookie("_hogekey_", "TEST|TEST2", {expires: 90, path: '/', secure: true});

■確認方法

console.log($.cookie("_hogekey_"));
// undefined

console.log(document.cookie);
↑こちらではちゃんと表示されるので入ってないわけではない？

kei344

2019/01/18 02:48 編集

書かれている状況が再現するコード（HTML/JavaScript）を提示されたほうが回答を得やすいと思います。

行動規範の内容に同意します

回答3件

ベストアンサー

** $.cookie.json=falseの場合 **

保存　：渡された値をそのままCokieに保存
取り出し： Cokieに保存されていた値をそのまま返却

** $.cookie.json=trueの場合 **

保存　：渡された値をJSON.stringifyしてCokieに保存
取り出し： Cokieに保存されていた値をJSON.parseして返却

$.cookie.jsonの値で上記のように動作が変わります。

したがって、$.cookie.json=falseの状態で"TEST|TEST2"を保存すると、そのまま保存されるわけですが、
これを$.cookie.json=tureの状態で取り出した場合、Cookieに保存していた"TEST|TEST2"の値をJSON.parseした値を返却しよとします。
しかし、"TEST|TEST2"はparse出来ませんのでエラーとなりundefinedが返却されます。

よって、ご質問の回答は、$.cookie.json=falseにして、取り出せば良いです。

javascript
1$.cookie.json = false;
2console.log($.cookie("_hogekey_"))

個人的には$.cookie.jsonの値はプロジェクトで統一しておいた方が無難だと思います。

（追記）
https://github.com/carhartl/jquery-cookieのドキュメントしか見ずに回答しているので
kunaiさんの回答の方が正解かもしれません。

投稿2019/01/18 04:50

編集2019/01/22 23:12

退会済みユーザー

総合スコア0

chiricode

2019/01/22 14:51

ありがとうございます！対象のページのみご指摘いただいた箇所が未設定でした。。様々なご意見、大変参考になりました。ありがとうございました。

行動規範の内容に同意します

ファイルをローカルに置いて確認してたりしませんか？
ローカルで確認する場合、ChromeだとCookie見られませんよ。
また、ローカルだとsecure=trueがあると(当然ながら)NGですね。

手元でEdgeで確認しましたが、普通に見えています。

HTML
1<!--test1.html-->
2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
3<script src="jquery.cookie.js"></script>
4<script>
5$(function(){
6    $.cookie.json = false;
7    $.cookie("_hogekey_", "TEST|TEST2", {expires: 90, path: '/', secure: false});
8});
9</script>
10<a href="test2.html">test2.html</a>

HTML
1<!--test2.html-->
2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
3<script src="jquery.cookie.js"></script>
4<script>
5$(function(){
6	$("#t").text($.cookie("_hogekey_"));
7	console.log($.cookie("_hogekey_"));
8
9	console.log(document.cookie);
10});
11
12</script>
13<a href="test.html">test.html</a>
14<div id="t"></div>