リストのaタグのhrefにセットしたリンクをクリックした判定

前提・実現したいこと

htmlでリストビューのようなものを作成しています。
Javascriptで取得した情報の中にリンクが含まれており、それをリスト内のaタグのhref属性にセットしています。

このリスト一つ一つのリンクがクリックされて既読したという判定はどうしたらよいかわからずに困っています。

何かしら方法をお教えいただきたいです。

該当のソースコード

javascript
1※サンプルです
2
3<ul>
4  <li> <a href='記事URL1'>記事１</a></li>
5  <li> <a href='記事URL2'>記事２</a></li>
6  <li> <a href='記事URL3'>記事３</a></li>
7</ul>

上記のようにulタグ内にhref属性をもったaタグをもつliを表示しています。

説明が下手で伝わりづらいと思いますので、意味がわからなければたくさん質問いただければお答えしますので、よろしくお願いします。

x_x

2020/03/12 09:13

一見するとサーバーで管理すればいいように思えますが、 JavaScript で管理するのでしょうか？リンク先は静的なコンテンツですか？

poppoas

2020/03/12 11:32

リンク先はAtomやRSSなどのフィードです。 APIとして利用したいので、Javascriptで管理したいです。 APIからフィードの情報を受け取って、それぞれの情報に既読情報を持たせておいて、再度APIを呼んだときに既読だったら別の配列に格納するなど。

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

回答2件

JavaScriptやHTMLのみでは異なる画面間で情報保存、共有できる方法は限られますが、WebStorageに持つとかでできると思います。

投稿2020/03/12 08:49

m.ts10806

総合スコア80875

poppoas

2020/03/12 08:55

回答ありがとうございます。 Webstorageなどに保存するとして、<li>にセットしたリンクをクリックした時にWebstorageに保存したいときは、どうしたら良いでしょうか？リンクをクリックした、というようなイベントなどご存じないでしょうか。

m.ts10806

2020/03/12 09:30 編集

そのまま検索すればJavaScriptのサンプルコードはわんさか出てくると思います。

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

ベストアンサー

WebStorageを利用したサンプルを簡単に書いてみました。

サンプルではsessionStorageを利用していますが、長期的な保存をしたい場合はlocalStorageを利用してください。sessionStorageはそのタブのみでしか情報を保存しません。

Web Storage APIの仕様や使い方はMDNのページがわかりやすいです。

HTML要素をクリックした際のイベントの発火（発生）は onclick=を使用してください。その他のイベントハンドラについては以下のページを参考にしてください。

JavaScriptのイベントハンドラ一覧 - PHP & JavaScript Room

html
1<body>
2  <ul>
3    <li><a onclick="linkClick('google')" href="https://google.com" target="_blank">Google<span id="google"></span></a></li>
4    <li><a onclick="linkClick('yahoo')" href="https://yahoo.co.jp" target="_blank">Yahoo<span id="yahoo"></span></a></li>
5    <li><a onclick="linkClick('amazon')" href="https://amazon.co.jp" target="_blank">Amazon<span id="amazon"></span></a></li>
6  </ul>  
7</body>

js
1//クリックされているか否かを次のオブジェクトに格納する
2let link_cliked = {}
3//ページ読み込み終了時に実行する
4window.onload = function(){
5    //sessionStorageの保存はタブごとに区切られるので注意。
6    //ブラウザで永続させたい場合はlocalStorageを使う
7    link_cliked.google = sessionStorage.getItem('google') || false //sessionStorageにある場合はその値を、ない場合はfalseを返す
8    link_cliked.yahoo = sessionStorage.getItem('yahoo') || false
9    link_cliked.amazon = sessionStorage.getItem('amazon') || false
10    clikedLinkDisplay() 
11}
12//リンクをクリックしたらsessionStorageとlink_cliked{}に保存する
13function linkClick(site_name){
14    sessionStorage.setItem(site_name,true);
15    link_cliked[site_name]=true;
16    clikedLinkDisplay()
17}
18//リンクをクリックしたことがあれば #clicked をつける
19function clikedLinkDisplay(){
20    if(link_cliked.google) document.getElementById('google').innerHTML = "#clicked"
21    if(link_cliked.yahoo) document.getElementById('yahoo').innerHTML = "#clicked"
22    if(link_cliked.amazon) document.getElementById('amazon').innerHTML = "#clicked"
23}