Bagaimanakah Saya Boleh Bertahan Pembolehubah Merentasi Muat Semula Halaman dalam Aplikasi Web?

Cara Mengekalkan Pembolehubah Antara Pemuatan Halaman

Menjejaki tindakan pengguna merentas muat semula halaman adalah penting untuk meningkatkan pengalaman pengguna dalam aplikasi web. Walau bagaimanapun, disebabkan sifat HTTP tanpa kewarganegaraan, tugas ini boleh mencabar.

Percubaan dan Ralat

Percubaan yang tidak berjaya untuk menangkap acara penyerahan borang dan kemudiannya menyahsembunyikan yang tersembunyi bidang telah dilaporkan. Kod JavaScript menggunakan pembolehubah global (diklik) untuk menyimpan status serahan, tetapi ia gagal mengekalkan nilainya semasa muat semula halaman.

Penyelesaian

Untuk mengatasi isu ini , terdapat beberapa kaedah yang boleh dilaksanakan:

1. Rentetan Pertanyaan

Apabila menyerahkan borang menggunakan kaedah GET, URL mengemas kini dengan rentetan pertanyaan yang mengandungi pasangan nilai parameter. Ini membolehkan anda menetapkan medan input dalam bentuk kepada nilai tertentu. Sebagai contoh, medan tersembunyi boleh ditambah:

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

Pada pemuatan halaman berikutnya, anda boleh menggunakan JavaScript untuk menghuraikan rentetan pertanyaan dan menyemak sebarang nilai yang diluluskan:

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');

2. Storan Web

HTML5 memperkenalkan Storan Web, yang menyediakan API untuk data berterusan dalam penyemak imbas merentas pemuatan halaman. Ia menawarkan dua pilihan: sessionStorage dan localStorage.

sessionStorage:

• Data kekal hanya semasa sesi penyemakan imbas semasa.
• Sesuai untuk disimpan data sementara, seperti keadaan yang diklik.

Kod untuk menetapkan sessionStorage pada klik butang:

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

Kod untuk menyemak sama ada sessionStorage ditetapkan pada pemuatan halaman:

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

localStorage:

• Data kekal selama-lamanya (melainkan dibersihkan secara manual oleh pengguna).
• Berguna untuk menyimpan data melebihi satu sesi penyemakan imbas.

Kod untuk menetapkan localStorage pada klik butang:

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

Kod untuk menyemak sama ada localStorage ditetapkan pada pemuatan halaman:

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

3. Kuki

Kuki menyediakan satu lagi mekanisme untuk penyimpanan data yang berterusan. Tidak seperti Storan Web, kuki direka terutamanya untuk komunikasi sebelah pelayan, tetapi kuki itu juga boleh digunakan untuk pengekalan data pihak pelanggan.

jQuery memudahkan pengendalian kuki:

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

Kod untuk dibaca kuki pada pemuatan halaman:

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

Untuk mengalih keluar kuki, panggil $.cookie('klik', null).

4. window.name

Walaupun agak tidak konvensional, sifat window.name boleh digunakan untuk menyimpan data merentas halaman semula:

window.name = "my value";

Rentetan atau objek bersiri boleh disimpan:

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

Walau bagaimanapun, pendekatan ini mempunyai had. Ia boleh diakses merentas tab dan domain, tetapi hanya dalam sesi penyemakan imbas yang sama. Ia biasanya tidak disyorkan untuk meneruskan data penting.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Bertahan Pembolehubah Merentasi Muat Semula Halaman dalam Aplikasi Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!