質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

17777閲覧

cookieに配列で値を格納するには

n.t

総合スコア64

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2017/09/06 02:40

編集2017/09/07 12:11

php

1<ul> 2 <li><a href="#" onclick=cookie('a')>AAA</a></li> 3 <li><a href="#" onclick=cookie('b')>BBB</a></li> 4 <li><a href="#" onclick=cookie('c')>CCC</a></li>

js

1function cookie (data){ 2 var name = 'cookie'; 3 var now = []; 4 5 now[data] = now Date(); 6 cookie = name + "=" + now + ";path=/"; 7 document.cookie = cookie; 8}

リンクをクリックした時にその時間をcookieとして保存したいと思っております。
リンクが複数あるんで配列で格納しようと思ったのですが、上記の形でやってもcookie
保存されません。
cookie = name + "=" + now[data] + ";path=/";
この部分を変更すると時間だけ単体で保存することはできました。
これを配列で保存するにはどうしたらいいのでしょうか

ご助力よろしくお願いいたします。

追記
最終的には簡易的な既読管理システムを実装したいと思っております。
ajaxを使ってクリック時間と記事の投稿時間を比較するためにジャンルごとのクリック時間を取得する必要があります。
時間を比較する部分はできているのでcookieの受け渡しで完成する予定です。

みなさま、回答ありがとうございます。
今回はローカルストレージを使うよりはCookieに任せた方がデータのやりとりがしやすかったので
cookieを使って解決いたしました。
今回の問題になっていたのがJSONの変換の部分が大きかったようです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/09/06 02:55 編集

最終形は何でしょうか?そもそもの目的を書かれたほうがより適切な回答を得られると思います。(cookieが正しいかどうか)あとは、「cookie」などjavascriptが従来持っている機能(予約語やメソッド・オブジェクトなど)の名称を変数やメソッド名で利用するのは好ましくないですよ(プログラミング言語全体に言えることですが)
guest

回答4

0

Cookieには、文字列しか保存できません。保存時にJSON.stringifyして、読み出し時にJSON.parseするというような対応を取りましょう。

なお、Cookieはサーバに送信されます。それが不要なら、localStorageのほうが向いているかもしれません。

投稿2017/09/06 02:55

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

Cookie は、name と value がセットできるので、連想配列の考え方を取り入れることが可能かと思いますが、設定できる数に限りが有るので、あまり現実的な案ではないです。

一般的には、maisumakun さんの回答のように、特定の name に紐付けた value に対して、json やその他パースしやすい形で設定するのが解になるかと。
サーバに送信されるという特徴以外に、容量も気になるところなので、仕様によっては、localStorage を使ったほうが良いと思います。

投稿2017/09/06 03:08

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

クッキーはdocument.cookieに適当に書けばいいというものではありません
きちんとやるなら何らかの汎用関数を定義しておいてください
一応サンプルつけておきます

javascript

1function setCookie(key,val,url){ 2 tmp = key+"="+escape(val)+";"; 3 tmp += "expires=Fri, 31-Dec-2030 23:59:59;"; 4 if(url){ 5 tmp += "domain="+getDomain(url)+";"; 6 tmp += "path="+getDomainPath(url)+";"; 7 } 8 document.cookie = tmp; 9}; 10function getCookie(key){ 11 tmp = document.cookie+";"; 12 tmp1 = tmp.indexOf(key,0); 13 if(tmp1 != -1){ 14 tmp = tmp.substring(tmp1,tmp.length); 15 start = tmp.indexOf("=",0); 16 end = tmp.indexOf(";",start); 17 return(unescape(tmp.substring(start+1,end))); 18 } 19 return(""); 20}; 21 22function delCookie(key){ 23 expiredate = new Date(); 24 expiredate.setYear(expiredate.getYear()-1); 25 tmp = key+"=;"; 26 tmp += "expires="+expiredate.toGMTString(); 27 document.cookie = tmp; 28}; 29function setClickTime(v){ 30 var d=new Date(); 31 var t=d.toLocaleString(); 32 setCookie(v,t); 33} 34function getClickTime(v){ 35 var t=getCookie(v); 36 if(t==="") t="no data"; 37 console.log(t); 38} 39function delClickTime(v){ 40 delCookie(v); 41}

HTML

1<input type="button" value="set A" onclick="setClickTime('a')"> 2<input type="button" value="set B" onclick="setClickTime('b')"> 3<input type="button" value="set C" onclick="setClickTime('c')"> 4<hr> 5<input type="button" value="get A" onclick="getClickTime('a')"> 6<input type="button" value="get B" onclick="getClickTime('b')"> 7<input type="button" value="get C" onclick="getClickTime('c')"> 8<hr> 9<input type="button" value="del A" onclick="delClickTime('a')"> 10<input type="button" value="del B" onclick="delClickTime('b')"> 11<input type="button" value="del C" onclick="delClickTime('c')">

配列

せっかくなので念の為配列を利用したサンプルもつけておきます
※timeという配列にa,b,cをそれぞれ保存しています

javascript

1function setCookie(key,val,url){ 2 tmp = key+"="+escape(val)+";"; 3 tmp += "expires=Fri, 31-Dec-2030 23:59:59;"; 4 if(url){ 5 tmp += "domain="+getDomain(url)+";"; 6 tmp += "path="+getDomainPath(url)+";"; 7 } 8 document.cookie = tmp; 9}; 10function getCookie(key){ 11 tmp = document.cookie+";"; 12 tmp1 = tmp.indexOf(key,0); 13 if(tmp1 != -1){ 14 tmp = tmp.substring(tmp1,tmp.length); 15 start = tmp.indexOf("=",0); 16 end = tmp.indexOf(";",start); 17 return(unescape(tmp.substring(start+1,end))); 18 } 19 return(""); 20}; 21 22function delCookie(key){ 23 expiredate = new Date(); 24 expiredate.setYear(expiredate.getYear()-1); 25 tmp = key+"=;"; 26 tmp += "expires="+expiredate.toGMTString(); 27 document.cookie = tmp; 28}; 29function setClickTime(v){ 30 var l=JSON.parse(getCookie('time')||"{}"); 31 var d=new Date(); 32 l[v]=d.toLocaleString(); 33 setCookie("time",JSON.stringify(l)); 34} 35function getClickTime(v){ 36 var l=JSON.parse(getCookie('time')||"{}"); 37 if(typeof l[v]!=="undefined"){ 38 t=l[v]; 39 }else{ 40 t="no data"; 41 } 42 console.log(t); 43} 44function delClickTime(v){ 45 var l=JSON.parse(getCookie('time')||"{}"); 46 delete(l[v]); 47 if(Object.keys(l).length==0){ 48 delCookie("time"); 49 }else{ 50 setCookie("time",JSON.stringify(l)); 51 } 52} 53function viewCookieAll(){ 54 console.log(document.cookie); 55}

html

1<input type="button" value="set A" onclick="setClickTime('a')"> 2<input type="button" value="set B" onclick="setClickTime('b')"> 3<input type="button" value="set C" onclick="setClickTime('c')"> 4<hr> 5<input type="button" value="get A" onclick="getClickTime('a')"> 6<input type="button" value="get B" onclick="getClickTime('b')"> 7<input type="button" value="get C" onclick="getClickTime('c')"> 8<hr> 9<input type="button" value="del A" onclick="delClickTime('a')"> 10<input type="button" value="del B" onclick="delClickTime('b')"> 11<input type="button" value="del C" onclick="delClickTime('c')"> 12<hr> 13<input type="button" value="view" onclick="viewCookieAll()">

投稿2017/09/06 03:05

編集2017/09/06 04:16
yambejp

総合スコア114574

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

配列扱ったcookieだと下記の記事が参考になるかもしれません。

最終的には簡易的な既読管理システムを実装したいと思っております。

ajaxを使ってクリック時間と記事の投稿時間を比較するためにジャンルごとのクリック時間を取得する必要があります

これだとますますmaisumakunさんの仰るようにlocalstorageが適切に思います。
ajax利用するのならクリック度にajaxでサーバー側の言語に投げてそちら側で時間を保持・管理する方が一元化できそうにも思います。

投稿2017/09/06 03:19

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問