サイト内の記事一覧で、それぞれの記事に「あとで読む」ボタンを作りたい

◯参考サイト（アダルトサイトです）
http://h-taikendan.net/

上記サイトのように、あとで見たい記事をボタンクリックして
一時的に保存したり削除したりするためにはどうしたらいいでしょうか。

おそらくjqueryとCookieを使用していると思うのですが、
どのようにコーディングしていいか分からず途方に暮れています。

◯実現したいこと
・DBを使わず動的にリンクの保存、削除。
・ひと目で保存した記事かどうか分かる。
・別ページで保存リンクの一覧を表示。

Googleでも調べてみたのですがヒットせず
こちらで質問させていただいた次第です…。

◯追記
教えていただいたloadStorageを使い、
色んなサイトを参考に、稚拙ながらがんばって作ってみました！
希望の動作になったのですが、2回目のクリックが効きません。
何か問題はありますか？？

javascript
1$(document).ready(function() {
2
3	var ua = navigator.userAgent;
4	var isIE7 = ua.match(/msie [7.]/i);
5
6	$('.fav-add').click(function(){
7		if(localStorage.getItem($(this).attr('url')) != undefined){
8			localStorage.removeItem($(this).attr('url'));
9
10			$(this).fadeOut(null, function(){
11				$(this).css('background-color', '#fafafa').fadeIn().unbind();
12			});
13
14		}else{
15			localStorage.setItem($(this).attr('url'),$(this).attr('url'));
16
17			$(this).fadeOut(null, function(){
18				$(this).css('background-color', 'red').fadeIn().unbind();
19			});
20		}
21	});
22
23	var contentsList = document.getElementsByClassName("fav-add");
24
25	for (var i = contentsList.length; i--;){
26
27		if(contentsList[i].attributes.url.nodeValue == localStorage.getItem(contentsList[i].attributes.url.nodeValue)){
28			contentsList[i].style.backgroundColor = "red";
29		}
30	}
31
32});

行動規範の内容に同意します

回答4件

記事の識別子を
・セッション
・Cookie
・ローカルストレージ
・（ブラウザDB）
のいずれかに保存すれば実装できます。

この場合、保存先の判断は、保存する容量ですかねぇ。。。
上記を検索すれば、実装方法はいくらでも出てくるかと。

投稿2017/06/12 12:52

退会済みユーザー

総合スコア0

退会済みユーザー

2017/06/12 13:37

なるほど…初耳な単語もあるので調べてみます！ご回答ありがとうございます！

行動規範の内容に同意します

以下。具体的な実装はできるものとして説明します。できない場合は、回答にレスください。
【登録】
１．ページ内にボタンを定義
２．スクリプトで、おされたボタンに対応するURL、タイトルを取得しクッキーに保存する関数を定義
（保存期間と保存数を超えた場合の処理も合わせて実行）
３．１で定義したボタンに２で作成した関数を、clickイベントでバインド（スマホも利用する場合はタッチイベントとの分岐）
４．３．で追加した時点で、当該ページに履歴表示エリアがあれば、エリアを更新

【表示】
１．クッキーから登録で登録されたURL、タイトルの情報を基に表示エリアを作成
２．合致する記事であればボタンを変更

こんな考え方でいいんじゃないでしょうか。削除とかも上記をかえればやれるかと。

投稿2017/06/12 12:49