jQueryで1回だけ処理をする場合、便利な「one」メソッドというのがある。
「one」メソッドとは、メソッド名のままですが「1度だけ」実行する処理のことを言います。
処理を繰り返したくない時などに有効です。
一度しか押せないボタンの作り方
実際の使い方は以下のjQueryをご確認ください。
jQuery
$(".demo").one("click", function() {
// 1度だけ実行する処理内容
});
この「one」メソッドを使ってイベントを書くと1度しか実行できない処理を書くことができます。
ただ、リロードしたりページを閉じてもう一度開くと、ボタンを押せてしまいます。
それを防ぎたい場合は、ローカルストレージを利用してユーザーのイベントを記憶しておけば安心。
リロードしたりページを閉じてもう一度開いても1度しか押せないボタンを作る方法
jQuery
if(localStorage.getItem("btn-click")){
// 再度開いた時にボタンをクリックしていたら実行する処理内容
}
$(".demo").on("click", function(){
if(!localStorage.getItem("btn-click")){
localStorage.setItem("btn-click", "check");
// 1度だけ実行する処理内容
}
});
これでリロードしてもブラウザを閉じても1度しか押せないボタンを作ることができました！
「再度開いた時にボタンをクリックしていたら実行する処理内容」には、ボタンを押してリロードした場合の処理を書いておきます。デモでは、ボタンを灰色にしてボタンのテキストを変更しています。
ローカルストレージの説明
簡単にローカルストレージ（localStorage）の説明を。
ローカルストレージ（localStorage）は、ブラウザに元々ついている機能。
古いブラウザでもローカルストレージ（localStorage）は、機能します。
「localStorage.setItem(key, value)」で値をブラウザに記憶し、記憶した値を「localStorage.getItem(key)」で利用します。
ブラウザに登録するlocalStorage.setItem(key, value)
この中の「key」と「value」は何を入れても大丈夫です。
デモでは「key」には、「”btn-click”」が入っていて
「value」には、「”check”」が入ってます。
ブラウザに記憶した値を利用するlocalStorage.getItem(key)
ブラウザに記憶したアイテムを呼び出すときは、「localStorage.getItem(key)」を使います。
この「key」には、「localStorage.setItem()」で記憶した「key」が入っています。
デモだと「key」には「”btn-click”」が入っています。
登録した値を削除するlocalStorage.clear(key)
ローカルストレージに登録したら、削除する方法も一緒に覚えておけば
さらに便利にローカルストレージを使えますね！
「localStorage.clear(key)」で「key」に削除したいキーを入れます。
デモのローカルストレージを削除する場合には「key」に「”btn-click”」が入ります。
「key」に何も入れないとすべてのローカルストレージを削除することになります。
コメント