jqueryでお気に入り

: らら

2022.10.03

JavaScript

はじめに

jqueryのお気に入りを作ったけど・・使わなかったので・・公開です。

参考

jquery.cookieをつかう・・

関連記事はこちらから
https://www.omakase.net/blog/2022/07/jquerycookie.html

JSのコード

件数制限してません。。。ドキュメントのタイトルが使用されます。

$(function () {
	var favorite = [];
	$.cookie.json = true;
	var cookie_id = "favorite"
	var cookie_date = new Date();
	cookie_date.setTime(cookie_date.getTime() + ( 365 * 24 * 60 * 60 * 1000 ));
	//期間を伸ばす・・
	if(typeof $.cookie(cookie_id) !== 'undefined') {
		cookie_value = getcookie_parse();
		$.cookie(cookie_id, JSON.stringify(cookie_value), { expires: cookie_date, path: '/' });
	}
	$('#favorite').on('click', function() {
		favorite = getcookie_parse();
		var find = 0;
		for(var item in favorite) {
			if(favorite[item].url == location.href) {
				find = 1;
			}
		}
		if(find == 0) {
			var cookie_value= {};
			cookie_value.title	= document.title;
			cookie_value.url	= location.href;
			favorite.push(cookie_value);
			$.cookie(cookie_id, JSON.stringify(favorite), { expires: cookie_date, path: '/' });
		}
	});
	$('#favorite_view').on('click', function() {
		favorite_view();
	});
	function favorite_view() {
		favorite = getcookie_parse();
		$(".favorite_list").remove();
		var insert = $('<ul>').addClass('favorite_list');
		var cnt = 1;
		for(var item in favorite) {
			insert.append("<li><a href='"+favorite[item].url+"'>"+favorite[item].title+"</a><input type='button' class='favoritedel' id='favoritedel_"+cnt+"' value='削除'></li>");
			cnt++;
		}
		$('#favorite_list').append(insert);
	}
	$(document).on("click", ".favoritedel", function () {
		var str_id = $(this).attr('id');
		resArray = str_id.split("_");
		var del_id = resArray[1];
		var cnt = 1;
		var newfavorite = [];
		favorite = getcookie_parse();
		for(var item in favorite) {
			if(cnt != del_id) {
				var cookie_value= {};
				cookie_value.title	= favorite[item].title;
				cookie_value.url	= favorite[item].url;
				newfavorite.push(cookie_value);
			}
			cnt++;
		}
		$.cookie(cookie_id, JSON.stringify(newfavorite), { expires: cookie_date, path: '/' });
		favorite_view();
	});
	function getcookie_parse() {
		var cookie_value = [];
		if(typeof $.cookie(cookie_id) !== 'undefined') {
			cookie_value = JSON.parse($.cookie(cookie_id));
		}
		return cookie_value;
	}
});

HTMLコード

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<body>
<input type="button" id="favorite" value="お気に入り">
<input type="button" id="favorite_view" value="お気に入り表示">
<div id="favorite_list">
</div>
</code></pre>
</body>
</html>

さいごに・・・

ねたぎれかも・・・・

ちょっと。。事故で、ブログアクセス減ったので・・2回目だし・・モチベひくい・・・w