はじめに
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