はじめに
例えば何かを投稿させるページで、ユーザーが一定時間離脱して戻ってきた時にセッションが切れてしまったり、実は誰かの最新投稿があるのに更新に気づかぬままちょっと遅れた投稿を誘発してしまったりということがあります。
そんな場合は一定期間ブラウザから離脱したら戻ってきた時にリロードするなど、JavaScript で何かしらフォローの処理をするのが良いです。
離脱と復帰を検知して処理
ユーザーの離脱と復帰は下記のように検知することができます。
window.addEventListener('focus',function(){
//復帰の検知
});
window.addEventListener('blur',function(){
//離脱の検知
});コメントの部分にそれぞれのケースにおける処理を書けば良いです。
例えば「1時間何の操作もなかった場合にリロードする」という処理にする場合には下記のように書くことができます。
window.addEventListener('focus',function(){
if(leave_at == null){return;}
var date = new Date() ;
now = Math.floor( date.getTime() / 1000 );
if(now - leave_at > 3600 /* 1 hour */){
location.reload();
}
});
window.addEventListener('blur',function(){
var date = new Date() ;
leave_at = Math.floor( date.getTime() / 1000 );
});離脱のタイミングでleave_atというグローバル変数に現在のunix timeを秒単位で代入しています。
その後、復帰を検知したタイミングでその時点でのunix timeとleave_atを比較して、1時間以上だった場合にリロードするという処理です。
まだ一度も離脱していない場合はleave_atがnullなので、その場合はすぐにreturnするようにしています。
書きかけの投稿がリロードで消えないようにする
上記のような処理をすると、長文を編集中にちょっと休憩して戻ってきたら全部消えてしまった、というようなことがあるかもしれません。
そういったことを防止するにはlocalStorageを利用するといいです。
localStorageはブラウザに値を保存して置ける機能です。
使ったことがない人は何となくめんどくさそうな印象を受けるかもしれませんが、とても簡単に利用することができます。
保存するときも呼び出す時もキーを指定して実行するだけの単純な構造になっており、
localStorage.getItem('キー');
localStorage.setItem('キー', 【保存したい値】);という形でとてもシンプルに読み書きが行えます。
キーを打つごとにリアルタイムでlocalStorageにバックアップしていくような方法もありますが、上記の方法でリロードした時だけフォローするのであれば
$(function(){
if(localStorage.getItem('toukou_backup')){
$("#toukou").val(localStorage.getItem('toukou_backup'));
localStorage.removeItem('toukou_backup');
}
});
window.addEventListener('focus',function(){
var date = new Date() ;
now = Math.floor( date.getTime() / 1000 );
if(now - leave_at > 3600 /* 1 hour */){
localStorage.setItem('toukou_backup', $("#toukou").val());
location.reload();
}
});
window.addEventListener('blur',function(){
var date = new Date() ;
leave_at = Math.floor( date.getTime() / 1000 );
});上記のような形でリロードの直前にlocalStorageにバックアップをとっておいて、リロード直後にバックアップからテキストを復帰してあげるような処理にできます。
JavaScriptを含めたプログラミング言語の年収と習得の難しさをランキングにしてみました。
合わせてご確認ください。