マイリスト機能の作成方法について

2008/06/11 11:12

このQ&Aのポイント

マイリスト機能の作成方法について調べました。ブラウザ上でお気に入りのページを保存するような機能を自分のサイトに実装するには、Cookieを使用する方法があります。
具体的には、追加と削除のボタンを用意し、追加ボタンをクリックするとテキストエリアに表示されているページの情報をCookieに保存します。次に、別のページで追加ボタンをクリックすると、新しいページの情報が既存の情報と結合されて保存されます。
このような仕組みを利用することで、ユーザーが自分のお気に入りのページを管理できるマイリスト機能を作成することができます。簡単なサンプルコードも用意されているので、参考にしてみてください。

destroiyar
お礼率50% (4/8)

JavaScript
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

steel_gray
ベストアンサー率66% (1052/1578)

2008/06/12 10:32 回答No.2

簡単ではないけど、サンプルです。仕様は適当にアレンジしてます。これを参考にがんばってください。 === HTML === <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Page1</title> <script type="text/javascript" src="sample.js"></script> </head> <body> <h1>PAGE1</h1> <div id="bookmark"></div> </body> </html> === sample.js === var BM = new bookmarker; if(window.addEventListener) window.addEventListener('load', BM.init, true); else window.attachEvent('onload',BM.init); function bookmarker(){ var areaId='bookmark'; var cssFile='style.css'; var O; var UL; var Css = document.createElement("link"); Css.rel = 'stylesheet'; Css.href = cssFile; Css.type = 'text/css' document.getElementsByTagName('head')[0].appendChild(Css); this.init = function(){ O=document.getElementById('bookmark'); O.innerHTML = '<p>' + '<input type="button" value="追加" onclick="BM.add()">' + ' <input type="button" value="削除" onclick="BM.del()">' + '<\/p><ul><\/ul>'; UL = O.getElementsByTagName('UL')[0]; get(); } this.add = function(){ var A=UL.getElementsByTagName('a'); //追加済みなら追加処理をキャンセル // for(var i=0;A[i];i++) // if(A[i].href==window.location.href)return; addLI(window.location.href,document.title); set(); } this.del = function(){ var x=UL.firstChild; while(x){ if(x.firstChild.checked) { var xx = x.nextSibling; UL.removeChild(x); x = xx; }else x = x.nextSibling; } set(); } var set = function(){ var dat = ''; var A=UL.getElementsByTagName('a'); for(var i=0;A[i];i++) { dat = dat + A[i].href + ',' + A[i].firstChild.nodeValue + '::'; } var dt = new Date(); dt.setFullYear(dt.getFullYear() + 1);//有効期限 1年 document.cookie = 'dat='+escape(dat)+';'+ 'expires='+dt.toGMTString()+';'+ 'path=/;'; } var get = function(){ var C = document.cookie.split(/;\s+/); for(var i=0;C[i];i++){ var D=C[i].split('='); if(D[0]!='dat')continue; D[1]=unescape(D[1]); var V=D[1].split('::'); for(var j=0;V[j];j++){ var S=V[j].split(','); addLI(S[0],S[1]); } } } var addLI = function(URL,TITLE){ var LI = document.createElement('li'); var CD = (URL==window.location.href)?' checked':'' LI.innerHTML = '<input type="checkbox"'+ CD + '>'+ '<a href="'+URL+'">'+TITLE+'<\/a>'; UL.appendChild(LI); } } === style.css === #bookmark { width:8em; border:solid medium black; padding:0.4em; } #bookmark p{ margin:0; text-align:center; } #bookmark ul{ margin:0.3em 0 0 0; padding:0; list-style-type:none; height:12em; overflow:auto; border:solid thin black; } #bookmark li{ margin:0; padding:0 0.1em; font-size:smaller; white-space:nowrap; } #bookmark li input{ vertical-align:middle; }

質問者