ajaxでjQueryをクリックして保存しますか？

Question

他のボタンがクリックされたら、別のボタンを表示するようにこのコードを取得しました。

<a href="#" id="ac-button-top" class="btn btn-success add-to-cart">order</a> 
<a href="#" id="ac-button-bottom" class="btn btn-success">test</a> 

$('.add-to-cart').click(function() { 
    $('#ac-button-top').css("display", "none"); 
    $('#ac-button-bottom').css("display", "block"); 
}); 

これは正常に動作します、しかし、私はページを更新する場合でも、それはまだ番目のボタンではなく最初のものを表示し何とかこのクリックイベントを保存する必要があります。私の推測では、これはajaxを使用して行いますが、私はajaxの初心者であり、誰かがこれを行う方法の正しい方向に私を指すことができる場合、これを検索したときにこれに対する解決策を見つけることができませんでしたか？ その他、ajaxを使用しない方法はありますか？

Answer 1

。 あなたは `localStorage`を使用し、AJAXを必要としない、それをサーバに送信する必要がない場合はこれがフィドルhttps://jsfiddle.net/y0ymqps7/2/

HTML

<a href="#" id="ac-button-top" class="btn btn-success add-to-cart">order</a> 
<a href="#" id="ac-button-bottom" class="btn btn-success">test</a> 

Javascriptを

$('.add-to-cart').click(function() { 
    $('#ac-button-top').css("display", "none"); 
    $('#ac-button-bottom').css("display", "block"); 
    localStorage.setItem("clicked", 1); 
}); 
$(document).ready(function() { 
    if(localStorage.getItem("clicked") == 1){ 
     $('#ac-button-top').css("display", "none"); 
     $('#ac-button-bottom').css("display", "block"); 
    } 
}); 

Answer 2

クリックイベント数またはデータを保存する必要がある場合。これらの詳細をデータベースから保存する必要がある場合あなただけがajaxメソッドを使うことができます。そうしないと、他の方法のように...

use sessionStorage or localStorage 

Answer 3

使用localStorageまたはsessionStorageのいずれかで行くことができます。それらの違いは、localStorageに有効期限が設定されておらず、ページセッションが終了するとsessionStorageがクリアされます。つまり、ブラウザウィンドウまたはタブが閉じられたときです。ページセッションは、ページの再読み込みとリストアを引き継ぎます。

あなたは同じようなものと考えることができます：あなたはlocalStorageを使用することができます

$('.add-to-cart').click(function() { 
    $('#ac-button-top').css("display", "none"); 
    $('#ac-button-bottom').css("display", "block"); 
    window.sessionStorage.setItem('addToCartClicked', true); 
}); 

// some operation later... 
if (window.sessionStorage.getItem('addToCartClicked') == 'true') { 
    ... 
}