Variabel tetap di antara pemuatan halaman

Saya mencoba menangkap penekanan tombol kirim formulir saya dan jika formulir dikirim, halaman disegarkan dan saya menampilkan beberapa bidang tersembunyi. Saya ingin menangkap apakah formulir telah dikirimkan sebelumnya atau tidak dan jika dikirimkan saat dimuat ulang, saya ingin menampilkan bidang tersembunyi. Saya mencoba menggunakan variabel global untuk mencapai ini, namun saya tidak dapat membuatnya berfungsi dengan baik.

Inilah yang saya coba:

  var clicked = false;

  $(document).ready(function() {

    $("input[type='submit'][value='Search']").attr("onclick", "form.act.value='detailSearch'; clicked = true;  return true;");

    if (clicked == true) {
      // show hidden fields
    } else {
      // don't show hidden fields
    }
  });

Ada saran tentang apa yang salah dengan kode ini?

Karena HTTP tidak memiliki kewarganegaraan, setiap kali Anda memuat halaman, ia akan menggunakan nilai awal dari apa pun yang Anda tetapkan di JavaScript. Anda tidak dapat menyetel variabel global di JS dan cukup membuat nilai itu tetap ada setelah memuat halaman lagi.

Ada beberapa cara untuk menyimpan nilai di tempat lain sehingga Anda dapat menginisialisasinya saat dimuat menggunakan JavaScript

String kueri

Saat mengirimkan formulir menggunakan GETmetode ini, url diperbarui dengan string kueri ( ?parameter=value&something=42). Anda dapat memanfaatkan ini dengan mengatur kolom input di formulir ke nilai tertentu. Ini akan menjadi contoh paling sederhana:

<form method="GET">
    <input type="hidden" name="clicked" value="true" />
    <input type="submit" />
</form>

Pada pemuatan awal halaman, tidak ada string kueri yang ditetapkan. Saat Anda mengirimkan formulir ini, filenamevalue kombinasi dan masukan akan diteruskan dalam string kueri sebagai clicked=true. Jadi ketika halaman memuat lagi dengan string kueri itu Anda dapat memeriksa apakah tombol itu diklik.

Untuk membaca data ini, Anda dapat menggunakan script berikut pada pemuatan halaman:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var clicked = getParameterByName('clicked');

( Sumber )

Kemampuan untuk menggunakan ini tergantung pada bagaimana formulir Anda saat ini bekerja, jika Anda sudah menggunakan POST maka ini bisa menjadi masalah.

Selain itu, untuk kumpulan data yang lebih besar, ini kurang dari optimal. Meneruskan string bukanlah masalah besar, tetapi untuk array dan objek data, Anda mungkin harus menggunakan Penyimpanan Web atau cookie. Meskipun detailnya sedikit berbeda di semua browser, batas praktis untuk panjang URI adalah sekitar 2000 karakter

Penyimpanan Web

Dengan diperkenalkannya HTML5, kami juga mendapatkan Penyimpanan Web, yang memungkinkan Anda menyimpan informasi di browser saat memuat halaman. AdalocalStorage yang dapat menyimpan data untuk waktu yang lebih lama (selama pengguna tidak menghapusnya secara manual) dan sessionStorageyang hanya menyimpan data selama sesi penjelajahan Anda saat ini. Yang terakhir berguna untuk Anda di sini, karena Anda tidak ingin "diklik" disetel ke true saat pengguna kembali lagi nanti.

Di sini saya mengatur penyimpanan pada acara klik tombol, tetapi Anda juga bisa mengikatnya ke formulir kirim atau apa pun.

$('input[type="submit"][value="Search"]').click(function() {
    sessionStorage.setItem('clicked', 'true');
});

Kemudian saat Anda memuat halaman, Anda dapat memeriksa apakah sudah diatur menggunakan ini:

var clicked = sessionStorage.getItem('clicked');

Meskipun nilai ini hanya disimpan selama sesi penjelajahan ini, ada kemungkinan Anda ingin mengatur ulang lebih awal. Untuk melakukannya, gunakan:

sessionStorage.removeItem('clicked');

Jika Anda ingin menyimpan objek atau larik JS, Anda harus mengubahnya menjadi string. Menurut spesifikasi, seharusnya dimungkinkan untuk menyimpan tipe data lain, tetapi ini belum diterapkan dengan benar di seluruh browser.

//set
localStorage.setItem('myObject', JSON.stringify(myObject));

//get
var myObject = JSON.parse(localStorage.getItem('myObject'));

Dukungan browser cukup bagus sehingga Anda harus aman menggunakan ini kecuali Anda perlu mendukung browser yang sangat lama / tidak jelas. Penyimpanan Web adalah masa depan.

Kue

Alternatif untuk Penyimpanan Web adalah menyimpan data dalam cookie. Cookies terutama dibuat untuk membaca data sisi server, tetapi juga dapat digunakan untuk data sisi klien murni.

Anda sudah menggunakan jQuery, yang membuat pengaturan cookie menjadi cukup mudah. Sekali lagi, saya menggunakan clickacara di sini tetapi bisa digunakan di mana saja.

$('input[type="submit"][value="Search"]').click(function() {
    $.cookie('clicked', 'true', {expires: 1}); // expires in 1 day
});

Kemudian pada pemuatan halaman Anda dapat membaca cookie seperti ini:

var clicked = $.cookie('clicked');

Karena cookie bertahan di seluruh sesi dalam kasus Anda, Anda harus membatalkannya segera setelah Anda melakukan apa pun yang perlu Anda lakukan dengannya. Anda tidak ingin pengguna kembali satu hari kemudian dan tetap clickedmenyetel ke true.

if(clicked === "true") {
    //doYourStuff();
    $.cookie('clicked', null);
}

(cara non-jQuery untuk mengatur / membaca cookie dapat ditemukan di sini )

Saya pribadi tidak akan menggunakan cookie untuk sesuatu yang sederhana seperti mengingat status yang diklik, tetapi jika string kueri bukan opsi dan Anda perlu mendukung browser yang benar-benar lama yang tidak mendukung sessionStorage, ini akan berfungsi. Anda harus mengimplementasikannya dengan memeriksa sessionStorage terlebih dahulu, dan hanya jika gagal menggunakan metode cookie.

window.name

Meskipun bagi saya ini tampak seperti peretasan yang mungkin berasal dari sebelum localStorage / sessionStorage, Anda dapat menyimpan informasi di window.nameproperti:

window.name = "my value"

Itu hanya dapat menyimpan string, jadi jika Anda ingin menyimpan objek, Anda harus merangkai seperti localStoragecontoh di atas :

window.name = JSON.stringify({ clicked: true });

Perbedaan utamanya adalah bahwa informasi ini disimpan tidak hanya di penyegaran halaman tetapi juga domain yang berbeda. Namun, itu terbatas pada tab tempat Anda berada saat ini.

Ini berarti Anda dapat menyimpan beberapa informasi di halaman Anda dan selama pengguna tetap berada di tab itu, Anda dapat mengakses informasi yang sama bahkan jika dia menjelajahi situs web lain dan sebaliknya. Secara umum, saya akan menyarankan agar tidak menggunakan ini kecuali Anda benar-benar perlu menyimpan informasi lintas domain selama satu sesi penjelajahan.

Coba manfaatkan $.holdReady(),history

function show() {
  return $("form input[type=hidden]")
          .replaceWith(function(i, el) {
            return "<input type=text>"
          });
}

$.holdReady(true);
    if (history.state !== null && history.state.clicked === true) {
       // show hidden fields
       // if `history.state.clicked === true` ,
       // replace `input type=hidden` with `input type=text`
       show();
       console.log(history);

    } else {
        // don't show hidden fields
        console.log(history);
    }
$.holdReady(false);

  $(document).ready(function() {

    $("input[type=submit][value=Search]")
    .on("click", function(e) {
        e.preventDefault();
        if (history.state === null) {
          // do stuff
          history.pushState({"clicked":true});
          // replace `input type=hidden` with `input type=text`
          show();
          console.log(history);
        } else {
          // do other stuff
        };
    });

  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST">
    <input type="text" name="name" value="" />
    <input type="submit" value="Search" />
    <input type="hidden" />
    <input type="hidden" />
</form>

Menggunakan localeStorageatau sessionStoragetampaknya menjadi taruhan terbaik.

Daripada menyimpan clickedvariabel dalam lingkup globle, simpan dengan cara ini:

if(localeStorage.getItem("clicked") === null)
    localeStorage.setItem("clicked", "FALSE"); // for the first time

$(document).ready(function() {

    $("input[type='submit'][value='Search']").attr("onclick", "form.act.value='detailSearch';return true;");

    var clicked = localeStorage.getItem("clicked") == "FALSE" ? "TRUE" : "FALSE";

    localeStorage.setItem("clicked", clicked);

    if (clicked == "TRUE") {
      // show hidden fields
    } else {
      // don't show hidden fields
    }

});

Anda bisa mencoba ini:

 $("input[type='submit'][value='Search']").click(function(){
     form.act.value='detailSearch'; 
     clicked = true;  
     return true;
});