JavaScriptでCookieの保存と読み込み

表示切り替えのリンクの部分を以下のようにして、

[
<a href="#" onclick="document.toform.page_type.value=0;document.toform.submit();document.cookie='page_type=0';" class="this-paging">一覧で並べる</a> 
|
<a href="#" onclick="document.toform.page_type.value=1;document.toform.submit();document.cookie='page_type=1';" >詳細で並べる</a> 
]

ページの下の方に以下のようなscriptを埋めておくのはどうでしょう？

<script type="text/javascript">
if(document.cookie && document.cookie.match(/page_type=0/)) {
  document.toform.page_type.value=0;
} else {
  document.toform.page_type.value=1;
}
</script>

このサイトの場合はサーバ側でCookieの処理をした方が良さそうではありますが、Javascriptだけでやる場合はこんな感じでいけるかと。

ただし、テストはしてないので動かないかもしれません(^^;;;

商品の一覧等の場合は、特に別のお客さんへのクチコミが重要になります。お客さんはこのURLをもって他の人に知らせる事になるのでソート条件がクッキーに保存されている様なページを他の人に知らせてしまうと、教えたい人に期待通りに伝わらない事になります。可能ならばクエリパラメータにソート条件も渡してあげるのが良いかと思いますがいかがでしょうか。

まず、

jquery.cookie.js をダウンロードします。

jquery.cookie.js | jQuery Plugins

次のようにスクリプトを変更してみてください。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery.cookie.js"></script> <!-- ★ここを追加(パスは適宜変更する) -->
<script type="text/javascript">
$(document).ready(function(){
 
	$("a.switch_thumb").toggle(function(){
		$(this).addClass("swap"); 
		$("ul.display").fadeOut("fast", function() {
			$(this).fadeIn("fast").addClass("thumb_view"); 
		});
		$.cookie('viewType', '0'); //★ここを追加
	}, function () {
		$(this).removeClass("swap");
		$("ul.display").fadeOut("fast", function() {
			$(this).fadeIn("fast").removeClass("thumb_view");
		});
		$.cookie('viewType', '1'); //★ここを追加
	}); 

});
</script>

<!-- ここから -->
<script type="text/javascript">
window.onload = function ini(){
	var vt = $.cookie('viewType');
	if(vt==null){
		$.cookie('viewType', '0'); //★cookieをセット
		vt = 0;
	}
	if(vt=='0'){
		  $(this).addClass("swap"); 
		  $("ul.display").fadeOut("fast", function() {
		  	$(this).fadeIn("fast").addClass("thumb_view"); 
			 });
	}else{
	      $(this).removeClass("swap");
		  $("ul.display").fadeOut("fast", function() {
		  	$(this).fadeIn("fast").removeClass("thumb_view");
			});
	}
}
</script>
<!-- ここまでを追加してください -->