jquery.cookieで、配列を登録することができません

Question

前提・実現したいこと

jqueryプラグイン「jquery.cookie」で、クリック履歴を５０件登録していきたいと思っています。

クリックした.postの中の<p>と<a>を拾い、それを#historyにリストで出力するということを実現したいです。

発生している問題・エラーメッセージ

クリックしても作動しません。

該当のソースコード

<!--cookie保存対象-->
<div class="post post1">
	<p>title1</p><a href="link1">link1</a>
</div>
<div class="post post2">
	<p>title2</p><a href="link2">link2</a>
</div>
<div class="post post3">
	<p>title3</p><a href="link3">link3</a>
</div>

<!--ここにcookieを出力-->
<div id="history">
</div>

<!--たとえば、 .post1のクリック時は以下のように出力したい-->
<div id="history">
<ul>
<li><a href="link1">title1<a/></li>
</ul>
</div>

<!--jQuery.cookieのコード-->
<script type="text/javascript">
$(function(){
	
	// クッキー登録
	$('body').on("click",'.post',function(){
		
		var historytitle = $(this).find('p').text();
		var historylink = $(this).find('a').attr('href');
		
		// 配列にタイトルとリンクを保存
		var params = [ { title: '', link: ''} ];
		if($.inArray(history, params) < 0){
			params.title.push(historytitle);
			params.link.push(historylink);  
		}
		 
		// クッキーに保存
		$.cookie('クリック履歴', { path: "/" });
		
	});

	// クッキー呼び出し
	var cookie = $.cookie('クリック履歴');
	if(cookie){
		$('#history').html('<ul><li>'+cookie+'</li></ul>');
	}
	
});

試したこと

単にこうすると登録できるので、プラグイン自体は作動しているようです。

$(function(){

// クッキー登録
$('body').on("click",'.post',function(){

$.cookie('クリック履歴', { path: "/" });
});

});

補足情報

【プラグインサイト】
・GitHub
https://github.com/carhartl/jquery-cookie

【参考サイト】
・jQueryプラグイン「jquery.cookie.js」でcookieを簡単に扱う
https://www.tam-tam.co.jp/tipsnote/javascript/post3109.html

Answer 1

文字列しか保存できません。
過去回答も参考にしてください。

Answer 2

こんな感じかな

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(function(){
  var his_length=5;
  $('#del').on('click',function(){
    $.removeCookie('click_his');
    $('#history').html("");
  });
  $('.post').on('click',function(){
    var title = $(this).find('p').text();
    var link = $(this).find('a').attr('href');
    var params = JSON.parse($.cookie('click_his')||"{}");
    if(typeof params!=="object" || typeof params.title=="undefined"){
      params={ title: [], link: [] };
    }
    params.title.push(title);
    params.link.push(link);  
    if( params.title.length>his_length){
      params.title.shift();
      params.link.shift();
    }
    var ul=$('<ul>');
    params.title.forEach(function(x,y){
      $('<li>').append($('<a>').attr('href',params.link[y]).text(x)).appendTo(ul);
    })
    $('#history').html(ul);
    $.cookie('click_his', JSON.stringify(params));
  });
});
</script>
<div class="post post1">
    <p>title1</p><a href="link1">link1</a>
</div>
<div class="post post2">
    <p>title2</p><a href="link2">link2</a>
</div>
<div class="post post3">
    <p>title3</p><a href="link3">link3</a>
</div>

<div id="history"></div>
<div id="del">del</div>

調整しました

Comments

[5656shitai]

ありがとうございます。
せっかく全て書いて頂いたところ大変恐縮ですが、動かないようです。
https://jsfiddle.net/a9zmcs06/

[yambejp]

ごめんなさい、初期化のところで間違いがあったので修正しました
再度コピペで調整してみて下さい

[5656shitai]

とんでもないです。ご修正ありがとうございます。

ご修正のもの（そして .post1 .post2 .post3 というクラスを削除しました）がこちらです。
https://jsfiddle.net/a9zmcs06/1/

あと１点だけお伺いしたいのですが（すみません！）、「削除」をクリックすると履歴は１件ずつ溜まりますが、しかし「削除」をクリックしないと一気に５件溜まってしまうようで、これは何が原因でしょうか？

[yambejp]

＞「削除」をクリックしないと一気に５件溜まってしまう

んー。それってクッキーにためたのが残っているからじゃないでしょうか？
ロード時にhistoryに表示する処理をいれていないので
一気にたまったように見えますが、単に前回の履歴だと思います

[5656shitai]

まぬけすぎましたね…笑
ありがとうございました！