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

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

ただいまの
回答率

90.49%

  • JavaScript

    20899questions

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

  • Cookie

    228questions

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

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,963

n.t

score 56

<ul>
    <li><a href="#" onclick=cookie('a')>AAA</a></li>
    <li><a href="#" onclick=cookie('b')>BBB</a></li>
    <li><a href="#" onclick=cookie('c')>CCC</a></li>
function cookie (data){
    var name = 'cookie';
    var now = [];

    now[data] = now Date();
    cookie = name + "=" + now + ";path=/";
    document.cookie = cookie;  
} 


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

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2017/09/06 11:55 編集

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

    キャンセル

回答 4

+4

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+2

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

function setCookie(key,val,url){
    tmp = key+"="+escape(val)+";";
    tmp += "expires=Fri, 31-Dec-2030 23:59:59;";
    if(url){
    tmp += "domain="+getDomain(url)+";";
    tmp += "path="+getDomainPath(url)+";";
    }
    document.cookie = tmp;
};
function getCookie(key){
    tmp = document.cookie+";";
    tmp1 = tmp.indexOf(key,0);
    if(tmp1 != -1){
        tmp = tmp.substring(tmp1,tmp.length);
        start = tmp.indexOf("=",0);
        end = tmp.indexOf(";",start);
        return(unescape(tmp.substring(start+1,end)));
    }
    return("");
};

function delCookie(key){
    expiredate = new Date();
    expiredate.setYear(expiredate.getYear()-1);
    tmp = key+"=;";
    tmp += "expires="+expiredate.toGMTString();
    document.cookie = tmp;
};
function setClickTime(v){
  var d=new Date();
  var t=d.toLocaleString();
  setCookie(v,t);
}
function getClickTime(v){
  var t=getCookie(v);
  if(t==="") t="no data";
  console.log(t);
}
function delClickTime(v){
  delCookie(v);
}
<input type="button" value="set A" onclick="setClickTime('a')">
<input type="button" value="set B" onclick="setClickTime('b')">
<input type="button" value="set C" onclick="setClickTime('c')">
<hr>
<input type="button" value="get A" onclick="getClickTime('a')">
<input type="button" value="get B" onclick="getClickTime('b')">
<input type="button" value="get C" onclick="getClickTime('c')">
<hr>
<input type="button" value="del A" onclick="delClickTime('a')">
<input type="button" value="del B" onclick="delClickTime('b')">
<input type="button" value="del C" onclick="delClickTime('c')">

 配列

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

function setCookie(key,val,url){
    tmp = key+"="+escape(val)+";";
    tmp += "expires=Fri, 31-Dec-2030 23:59:59;";
    if(url){
    tmp += "domain="+getDomain(url)+";";
    tmp += "path="+getDomainPath(url)+";";
    }
    document.cookie = tmp;
};
function getCookie(key){
    tmp = document.cookie+";";
    tmp1 = tmp.indexOf(key,0);
    if(tmp1 != -1){
        tmp = tmp.substring(tmp1,tmp.length);
        start = tmp.indexOf("=",0);
        end = tmp.indexOf(";",start);
        return(unescape(tmp.substring(start+1,end)));
    }
    return("");
};

function delCookie(key){
    expiredate = new Date();
    expiredate.setYear(expiredate.getYear()-1);
    tmp = key+"=;";
    tmp += "expires="+expiredate.toGMTString();
    document.cookie = tmp;
};
function setClickTime(v){
  var l=JSON.parse(getCookie('time')||"{}");
  var d=new Date();
  l[v]=d.toLocaleString();
  setCookie("time",JSON.stringify(l));
}
function getClickTime(v){
  var l=JSON.parse(getCookie('time')||"{}");
  if(typeof l[v]!=="undefined"){
    t=l[v];
  }else{
    t="no data";
  }
  console.log(t);
}
function delClickTime(v){
  var l=JSON.parse(getCookie('time')||"{}");
  delete(l[v]);
  if(Object.keys(l).length==0){
    delCookie("time");
  }else{
    setCookie("time",JSON.stringify(l));
  }
}
function viewCookieAll(){
  console.log(document.cookie);
}
<input type="button" value="set A" onclick="setClickTime('a')">
<input type="button" value="set B" onclick="setClickTime('b')">
<input type="button" value="set C" onclick="setClickTime('c')">
<hr>
<input type="button" value="get A" onclick="getClickTime('a')">
<input type="button" value="get B" onclick="getClickTime('b')">
<input type="button" value="get C" onclick="getClickTime('c')">
<hr>
<input type="button" value="del A" onclick="delClickTime('a')">
<input type="button" value="del B" onclick="delClickTime('b')">
<input type="button" value="del C" onclick="delClickTime('c')">
<hr>
<input type="button" value="view" onclick="viewCookieAll()">

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    20899questions

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

  • Cookie

    228questions

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