指定日数経過でHTML上のデータを一部消す

javascriptだと思ったのでこちらのカテを選びましたが違ったらすみません。

サイトに掲載しているデータを●日経過した時点で消したいのですが方法がわからず、アドバイス頂けないでしょうか。
行いたいことは、例えば<div id="hoge">～</div>といった感じで、指定したID内のコンテンツを、指定した日数経過するとページ上に掲載されないようにしたいです。

ただしこれらは、アクセスするユーザーごとに対応したいので一律●日経過で見えないようにするということではありません。

例えば、掲載期間が3日で指定した場合、Aさんは最初に訪れた日が5日前なので、すでに3日経過しているため見れない。Bさんは、今日初めてアクセスしたので、残り3日間閲覧が可能…、といった感じが希望です。

こういった事は可能でしょうか？もし、実現できるとしたらどのような方法か、具体的なアドバイスを頂けないでしょうか。
調べてみるのですが、経過日数は取得できるようなのですが、指定したものを消すという方法が見つかりません。

お詳しい方いらっしゃいましたら、よろしくお願いいたします。

No.4 ベストアンサー 回答者： Ogre7077 回答日時： 2016/06/10 18:29

JavaScript だけで実現する具体的な方法。

お知らせ表示程度ならば、これで十分でしょう。

<style>
.notice .new { font-weight:bold; } /* 注目表示 */
.notice .expiration { display:none; } /* 期限切れ */
</style>

<script>
document.addEventListener('DOMContentLoaded', function(ev){var _=0;
_; function A(a){return Array.prototype.slice.apply(a)}
_; function QQ(s){return A(document.querySelectorAll(s))}
_; var DAY = 1000*60*60*24;
_; var attent = DAY * 1 / 24; // 最初の1時間は注目表示
_; var KEY = 'noticeFirstView';
_; var now = new Date().getTime();
_; var p = localStorage.getItem(KEY);
_; var record = p? JSON.parse(p): {};
_; var neo = {};
_; QQ('.notice *[id][data-days]').forEach(function(e){
_; _; var period = DAY * parseFloat(e.dataset.days);
_; _; var first = record[e.id];
_; _; if (first && now < first+attent) e.classList.add('new');
_; _; if (first && first+period < now) e.classList.add('expiration');
_; _; neo[e.id] = first? first: now; // お知らせを最初見た日時を記録
_; });
_; localStorage.setItem(KEY, JSON.stringify(neo)); // 閲覧記録をブラウザに保存
}, false);
</script>

<ul class=notice>
<li data-days=1 id=hogehoyohoe>1日だけ掲載したいお知らせ
<li data-days=2 id=foobarbazqu>2日だけ掲載したいお知らせ
<li data-days=4.5 id=issyhatrsgt>4日半だけ掲載したいお知らせ
</ul>

この回答へのお礼

Ogre7077様
具体的な回答ありがとうございます、とても分かりやすく書いて頂き感謝申し上げます。
私の説明不足もあり、どの程度の厳格性か等の情報が無く大変失礼いたしました。まさにお知らせ程度、簡易的に実装できれば今回は問題ありません。
回答頂きました他の皆さまもお礼申し上げます。
ありがとうございました！

お礼日時：2016/06/14 08:28

No.3 回答者： nic1821 回答日時： 2016/06/10 17:35

回答ではないけど気になったことを。

。。

Javascriptとあるのでクライアント側だけで実現しようとしているのかな？？？
あと、見えないことの強さはどの程度なのかな？？？
(絶対に見せてはいけないのかというか。
例えば、他人の口座の残高とか。)

表示上見えなくても、ページ内Javascriptがユーザや日数に応じて表示制御だけをしている場合、ページソースを見れば古い内容はわかってしまいますね。
(表示制御する内容が増えると、見た目は大したことないのに、ページサイズは大きくなってロードが遅かったり、サーバ負荷が上がったりもあるかも。)
Ajax等で非同期でサーバから取得する作りならそこは回避できるかもしれません。
ただ、取得のクエリーがベタだとそこを変えるだけで古いものや他人のものを知ることができたりしちゃいます。
そうなるとセッション管理になってきて、クライアント側で表示を制御するのではなく、サーバ側で条件に応じて見せるものだけを返す方が自然かもしれません。

No.2 回答者： fujillin 回答日時： 2016/06/10 12:26

こんにちは

簡単に実現するのなら、以下のような方法の応用でできると思います。
http://www.pori2.net/js/cookie/1.html
http://www.red.oit-net.jp/tatsuya/java/cookie.htm
http://magnets.jp/web_design/4897/

経過日時の例がすぐには見つからなかったので、上記の例は「訪問回数」の表示になっています。
考え方はほぼ同じで、訪問回数を算出(記録）する代わりに、最初の訪問日を記録しておいて経過日数を算出して判定するという感じですね。
一律ではなく、ユーザーごとへの対応が可能な方法の一例といえます。

スクリプトで日時を参照する際に通常はクライアントの時刻設定を利用しますが、実は、クライアントの設定が正しくされているという保証はありません。
とはいうものの、経過日数を見たいだけなので、設定がずれていても経過時間（＝差分）なので正しく測れるでしょう。

この方法の欠点としては、記録に利用している「クッキー」の機能はユーザー側でON/OFFが可能ですし、そもそもjavascriptの実行もユーザ側でOFFにできますので、そのような場合は機能しないということです。


＞経過日数は取得できるようなのですが、指定したものを消すという方法が見つかりません。
要素の表示/非表示はstyle属性のdisplay:block/noneを切り替えたり、visibility:visible/hiddenを切り替えたりで実現できます。
具体的な方法は以下を参照してみてください。
http://allabout.co.jp/gm/gc/23973/
http://www.pori2.net/js/DOM/7.html

No.1 回答者： yambejp 回答日時： 2016/06/10 11:26

基本的にはログイン型のサイトにしてDBなどでユーザー情報を管理しないと

正確には処理できません。

ただjavascriptで簡易的にやる場合には
・初回アクセス日時
・前回アクセス日時
の２つくらいをcookieとして保存しておけば、それら日時と
現時点の日時を比較して、表示を変えることは可能です。
cookieの管理はjavascriptで1から書いてもいいですが
jQueryなどで処理するほうが楽かも

なお、javascriptやcookieはすべての環境で使えるわけではありません
きちんとやりたいのであればDBを検討ください