Bagaimana cara meneruskan data dari satu halaman ke halaman lain dalam html?

Question

Ini juga cukup mudah untuk meneruskan data ke halaman baru - dengan menggunakan mekanisme yang sama yang digunakan formulir

Bentuk Sederhana

Pertimbangkan bentuk sederhananya

browser akan menyandikan nama kolom input dan nilainya sebagai bagian dari URL saat memanggil halaman target (di sini disebut 'script8. htm'). Nama depan dan pasangan nilai dikodekan dengan menambahkan '?field-name=value' ke URL. Jadi untuk contoh di atas ini akan menjadi

script8.htm?Something=...

_

Setiap parameter tambahan dikodekan dengan menambahkan '&field-name=value' ke URL

Catatan. Jika Anda ingin menentukan "metode" secara eksplisit (untuk alasan gaya atau kejelasan) maka contoh di atas akan menjadi

tetapi karena "GET" adalah metode default untuk formulir, maka tidak perlu ditentukan

Menerima dan decoding data

Nilai yang dikodekan tersedia untuk halaman penerima di '

0'. Misalnya, untuk halaman ini nilai '

0' adalah

''

Ini akan kosong saat pertama kali Anda mengunjungi atau melihat halaman ini, tetapi akan berisi beberapa teks saat Anda mencoba contoh nanti di halaman ini

Sebagai contoh sederhana pertama, kotak di bawah ini dibuat menggunakan kode formulir yang ditampilkan di bagian atas halaman ini

Coba masukkan sesuatu dan tekan Return

Dua hal yang perlu diingat saat memanipulasi '

0'

Formulir pengiriman akan mengganti semua spasi dengan tanda '+', jadi Anda harus melakukan substitusi terbalik
Formulir pengiriman akan menggunakan 'escape' pada nilai parameter sehingga Anda harus menggunakan 'unescape' untuk kembali ke string asli

Meskipun Anda dapat memanipulasi '

0' secara langsung dan mengekstrak data yang Anda butuhkan darinya, mungkin lebih mudah untuk menulis sendiri fungsi untuk melakukannya yang menyertakan aturan di atas. Berikut ini adalah saran yang digunakan di situs web ini

                                                      

Membandingkan penggunaan fungsi ini dengan isi '

0'

lokasi. search=''GetParam('Sesuatu')=''

Penggunaan lainnya

Contoh di atas menggunakan form, namun mekanisme yang sama dapat digunakan untuk melewatkan data tanpa menggunakan form. Satu-satunya hal yang perlu diingat adalah menggunakan fungsi 'Escape' untuk menyandikan nilai data Anda. Sebagai contoh

Selamat datang di tutorial tentang cara meneruskan variabel antar halaman dalam Javascript. Perlu meneruskan beberapa data di antara halaman yang berbeda?

Cara mudah untuk meneruskan variabel antar halaman adalah dengan menggunakan string kueri

Di halaman pertama

<script>
function get () {
  // (A) GET FROM SESSION
  var first = sessionStorage.getItem("first"),
      second = JSON.parse(sessionStorage.getItem("second"));

  // (B) IT WORKS!
  // MANUALLY OPENING 1B-SESSION.HTML WILL NOT WORK THOUGH
  // SESSION DATA WILL PERISH ONCE TAB/WINDOW IS CLOSED
  console.log(first);  // Foo Bar
  console.log(second); // ["Hello", "World"]

  // (EXTRA) CLEAR SESSION STORAGE
  // sessionStorage.removeItem("KEY");
  // sessionStorage.clear();
}
</script>

<input type="button" value="Get From Session Storage" onclick="get()"/>

_2

<script>
function get () {
  // (A) GET FROM SESSION
  var first = sessionStorage.getItem("first"),
      second = JSON.parse(sessionStorage.getItem("second"));

  // (B) IT WORKS!
  // MANUALLY OPENING 1B-SESSION.HTML WILL NOT WORK THOUGH
  // SESSION DATA WILL PERISH ONCE TAB/WINDOW IS CLOSED
  console.log(first);  // Foo Bar
  console.log(second); // ["Hello", "World"]

  // (EXTRA) CLEAR SESSION STORAGE
  // sessionStorage.removeItem("KEY");
  // sessionStorage.clear();
}
</script>

<input type="button" value="Get From Session Storage" onclick="get()"/>

_3

<script>
function get () {
  // (A) GET FROM SESSION
  var first = sessionStorage.getItem("first"),
      second = JSON.parse(sessionStorage.getItem("second"));

  // (B) IT WORKS!
  // MANUALLY OPENING 1B-SESSION.HTML WILL NOT WORK THOUGH
  // SESSION DATA WILL PERISH ONCE TAB/WINDOW IS CLOSED
  console.log(first);  // Foo Bar
  console.log(second); // ["Hello", "World"]

  // (EXTRA) CLEAR SESSION STORAGE
  // sessionStorage.removeItem("KEY");
  // sessionStorage.clear();
}
</script>

<input type="button" value="Get From Session Storage" onclick="get()"/>

_4

Di halaman kedua

<script>
function get () {
  // (A) GET FROM SESSION
  var first = sessionStorage.getItem("first"),
      second = JSON.parse(sessionStorage.getItem("second"));

  // (B) IT WORKS!
  // MANUALLY OPENING 1B-SESSION.HTML WILL NOT WORK THOUGH
  // SESSION DATA WILL PERISH ONCE TAB/WINDOW IS CLOSED
  console.log(first);  // Foo Bar
  console.log(second); // ["Hello", "World"]

  // (EXTRA) CLEAR SESSION STORAGE
  // sessionStorage.removeItem("KEY");
  // sessionStorage.clear();
}
</script>

<input type="button" value="Get From Session Storage" onclick="get()"/>

_5

<script>
function get () {
  // (A) GET FROM SESSION
  var first = sessionStorage.getItem("first"),
      second = JSON.parse(sessionStorage.getItem("second"));

  // (B) IT WORKS!
  // MANUALLY OPENING 1B-SESSION.HTML WILL NOT WORK THOUGH
  // SESSION DATA WILL PERISH ONCE TAB/WINDOW IS CLOSED
  console.log(first);  // Foo Bar
  console.log(second); // ["Hello", "World"]

  // (EXTRA) CLEAR SESSION STORAGE
  // sessionStorage.removeItem("KEY");
  // sessionStorage.clear();
}
</script>

<input type="button" value="Get From Session Storage" onclick="get()"/>

_6

Tapi ada lebih banyak metode yang bisa kita gunakan. Mari kita telusuri beberapa contoh dalam panduan ini, dan cara apa yang lebih baik untuk menangani berbagai hal – Baca terus

ⓘ Saya telah menyertakan file zip dengan semua kode sumber contoh di awal tutorial ini, jadi Anda tidak perlu menyalin-tempel semuanya… Atau jika Anda hanya ingin langsung masuk

SLIDE CEPAT

Unduh & Catatan

UNDUH & CATATAN

Pertama, berikut adalah tautan unduhan ke kode contoh seperti yang dijanjikan

CATATAN CEPAT

Perhatikan bahwa beberapa contoh ini tidak akan bekerja dengan

<script>
function get () {
  // (A) GET FROM SESSION
  var first = sessionStorage.getItem("first"),
      second = JSON.parse(sessionStorage.getItem("second"));

  // (B) IT WORKS!
  // MANUALLY OPENING 1B-SESSION.HTML WILL NOT WORK THOUGH
  // SESSION DATA WILL PERISH ONCE TAB/WINDOW IS CLOSED
  console.log(first);  // Foo Bar
  console.log(second); // ["Hello", "World"]

  // (EXTRA) CLEAR SESSION STORAGE
  // sessionStorage.removeItem("KEY");
  // sessionStorage.clear();
}
</script>

<input type="button" value="Get From Session Storage" onclick="get()"/>

7. Gunakan server web yang tepat dengan

<script>
function get () {
  // (A) GET FROM SESSION
  var first = sessionStorage.getItem("first"),
      second = JSON.parse(sessionStorage.getItem("second"));

  // (B) IT WORKS!
  // MANUALLY OPENING 1B-SESSION.HTML WILL NOT WORK THOUGH
  // SESSION DATA WILL PERISH ONCE TAB/WINDOW IS CLOSED
  console.log(first);  // Foo Bar
  console.log(second); // ["Hello", "World"]

  // (EXTRA) CLEAR SESSION STORAGE
  // sessionStorage.removeItem("KEY");
  // sessionStorage.clear();
}
</script>

<input type="button" value="Get From Session Storage" onclick="get()"/>

_8 sebagai gantinya

Jika Anda menemukan bug, jangan ragu untuk berkomentar di bawah ini. Saya mencoba menjawab pertanyaan singkat juga, tetapi itu adalah satu orang versus seluruh dunia… Jika Anda sangat membutuhkan jawaban, silakan periksa daftar situs web saya untuk mendapatkan bantuan dalam pemrograman

DOWNLOAD KODE CONTOH

Klik di sini untuk mengunduh kode sumber, saya telah merilisnya di bawah lisensi MIT, jadi silakan membangun di atasnya atau menggunakannya dalam proyek Anda sendiri

CARA MELEWATI VARIABEL ANTAR HALAMAN

Baiklah, sekarang mari kita masuk ke cara untuk meneruskan variabel antar halaman dalam Javascript

METODE 1) PENYIMPANAN SESI

sesi 1a. html

<script>
function store () {
  // (A) VARIABLES TO PASS
  var first = "Foo Bar",
      second = ["Hello", "World"];
 
  // (B) SAVE TO SESSION STORAGE
  // (B1) FLAT STRING OR NUMBER
  // SESSIONSTORAGE.SETITEM("KEY", "VALUE");
  sessionStorage.setItem("first", first);
 
  // (B2) ARRAY OR OBJECT
  // SESSION STORAGE CANNOT STORE ARRAY AND OBJECTS
  // JSON ENCODE BEFORE STORING, CONVERT TO STRING
  sessionStorage.setItem("second", JSON.stringify(second));
 
  // (C) REDIRECT
  location.href = "1b-session.html";
  // window.open("1b-session.html");
}
</script>

<input type="button" value="Store To Session Storage" onclick="store()"/>

sesi 1b. html

<script>
function get () {
  // (A) GET FROM SESSION
  var first = sessionStorage.getItem("first"),
      second = JSON.parse(sessionStorage.getItem("second"));

  // (B) IT WORKS!
  // MANUALLY OPENING 1B-SESSION.HTML WILL NOT WORK THOUGH
  // SESSION DATA WILL PERISH ONCE TAB/WINDOW IS CLOSED
  console.log(first);  // Foo Bar
  console.log(second); // ["Hello", "World"]

  // (EXTRA) CLEAR SESSION STORAGE
  // sessionStorage.removeItem("KEY");
  // sessionStorage.clear();
}
</script>

<input type="button" value="Get From Session Storage" onclick="get()"/>

_

Yap, tidak perlu tipu muslihat. Ada area penyimpanan "kotak pasir" sementara di Javascript yang disebut penyimpanan sesi. Sangat mudah digunakan, hanya 4 fungsi yang perlu diketahui

<script>
function get () {
  // (A) GET FROM SESSION
  var first = sessionStorage.getItem("first"),
      second = JSON.parse(sessionStorage.getItem("second"));

  // (B) IT WORKS!
  // MANUALLY OPENING 1B-SESSION.HTML WILL NOT WORK THOUGH
  // SESSION DATA WILL PERISH ONCE TAB/WINDOW IS CLOSED
  console.log(first);  // Foo Bar
  console.log(second); // ["Hello", "World"]

  // (EXTRA) CLEAR SESSION STORAGE
  // sessionStorage.removeItem("KEY");
  // sessionStorage.clear();
}
</script>

<input type="button" value="Get From Session Storage" onclick="get()"/>

_9

<script>
function store () {
  // (A) VARIABLES TO PASS
  var first = "Foo Bar",
      second = ["Hello", "World"];

  // (B) SAVE TO LOCAL STORAGE
  // (B1) FLAT STRING OR NUMBER
  // LOCALSTORAGE.SETITEM("KEY", "VALUE");
  localStorage.setItem("first", first);
 
  // (B2) ARRAY OR OBJECT
  // LOCAL STORAGE CANNOT STORE ARRAY AND OBJECTS
  // JSON ENCODE BEFORE STORING, CONVERT TO STRING
  localStorage.setItem("second", JSON.stringify(second));

  // (C) REDIRECT OR OPEN NEW WINDOW IF YOU WANT
  location.href = "2b-local-storage.html";
  // window.open("2b-local-storage.html");
}
</script>

<input type="button" value="Store To Local Storage" onclick="store()"/>

_0

<script>
function store () {
  // (A) VARIABLES TO PASS
  var first = "Foo Bar",
      second = ["Hello", "World"];

  // (B) SAVE TO LOCAL STORAGE
  // (B1) FLAT STRING OR NUMBER
  // LOCALSTORAGE.SETITEM("KEY", "VALUE");
  localStorage.setItem("first", first);
 
  // (B2) ARRAY OR OBJECT
  // LOCAL STORAGE CANNOT STORE ARRAY AND OBJECTS
  // JSON ENCODE BEFORE STORING, CONVERT TO STRING
  localStorage.setItem("second", JSON.stringify(second));

  // (C) REDIRECT OR OPEN NEW WINDOW IF YOU WANT
  location.href = "2b-local-storage.html";
  // window.open("2b-local-storage.html");
}
</script>

<input type="button" value="Store To Local Storage" onclick="store()"/>

_1

<script>
function store () {
  // (A) VARIABLES TO PASS
  var first = "Foo Bar",
      second = ["Hello", "World"];

  // (B) SAVE TO LOCAL STORAGE
  // (B1) FLAT STRING OR NUMBER
  // LOCALSTORAGE.SETITEM("KEY", "VALUE");
  localStorage.setItem("first", first);
 
  // (B2) ARRAY OR OBJECT
  // LOCAL STORAGE CANNOT STORE ARRAY AND OBJECTS
  // JSON ENCODE BEFORE STORING, CONVERT TO STRING
  localStorage.setItem("second", JSON.stringify(second));

  // (C) REDIRECT OR OPEN NEW WINDOW IF YOU WANT
  location.href = "2b-local-storage.html";
  // window.open("2b-local-storage.html");
}
</script>

<input type="button" value="Store To Local Storage" onclick="store()"/>

_2

Namun perlu diperhatikan bahwa penyimpanan sesi akan dihapus secara otomatis setelah pengguna menutup tab/jendela

P. S. Data juga tidak akan diteruskan saat pengguna membuka tab/jendela lain secara manual

METODE 2) PENYIMPANAN LOKAL

2a-penyimpanan lokal. html

<script>
function store () {
  // (A) VARIABLES TO PASS
  var first = "Foo Bar",
      second = ["Hello", "World"];

  // (B) SAVE TO LOCAL STORAGE
  // (B1) FLAT STRING OR NUMBER
  // LOCALSTORAGE.SETITEM("KEY", "VALUE");
  localStorage.setItem("first", first);
 
  // (B2) ARRAY OR OBJECT
  // LOCAL STORAGE CANNOT STORE ARRAY AND OBJECTS
  // JSON ENCODE BEFORE STORING, CONVERT TO STRING
  localStorage.setItem("second", JSON.stringify(second));

  // (C) REDIRECT OR OPEN NEW WINDOW IF YOU WANT
  location.href = "2b-local-storage.html";
  // window.open("2b-local-storage.html");
}
</script>

<input type="button" value="Store To Local Storage" onclick="store()"/>

2b-penyimpanan lokal. html

<script>
function get () {
  // (A) GET FROM SESSION
  var first = localStorage.getItem("first"),
      second = JSON.parse(localStorage.getItem("second"));

  // (B) IT WORKS!
  // NOTE: LOCAL STORAGE IS PERSISTENT
  // WILL NOT BE DELETED UNLESS USER CLEARS BROWSER DATA OR MANUALLY CLEARED
  console.log(first);  // Foo Bar
  console.log(second); // ["Hello", "World"]

  // (EXTRA) CLEAR LOCAL STORAGE
  // localStorage.removeItem("KEY");
  // localStorage.clear();
}
</script>

<input type="button" value="Get From Local Storage" onclick="get()"/>

Terlihat tidak asing? . Yap, area penyimpanan sementara yang sama, tetapi penyimpanan lokal tetap ada – Apa pun yang disetel di penyimpanan lokal akan tetap ada hingga dihapus secara manual;

METODE 3) PARAMETER URL

3a-query. html

<script>
function go () {
  // (A) VARIABLES TO PASS
  var first = "Foo Bar",
      second = ["Hello", "World"];

  // (B) URL PARAMETERS
  var params = new URLSearchParams();
  params.append("first", first);
  params.append("second", JSON.stringify(second));

  // (C) GO!
  var url = "3b-query.html?" + params.toString();
  location.href = url;
  // window.open(url);
}
</script>

<input type="button" value="GO" onclick="go()"/>

3b-query. html

<script>
function get () {
  // (A) GET THE PARAMETERS
  var params = new URLSearchParams(window.location.search),
      first = params.get("first"),
      second = JSON.parse(params.get("second"));

  // (B) IT WORKS!
  console.log(first);  // Foo Bar
  console.log(second); // ["Hello", "World"]
}
</script>

<input type="button" value="Get" onclick="get()"/>

Anda mungkin pernah mendengar tentang

<script>
function store () {
  // (A) VARIABLES TO PASS
  var first = "Foo Bar",
      second = ["Hello", "World"];

  // (B) SAVE TO LOCAL STORAGE
  // (B1) FLAT STRING OR NUMBER
  // LOCALSTORAGE.SETITEM("KEY", "VALUE");
  localStorage.setItem("first", first);
 
  // (B2) ARRAY OR OBJECT
  // LOCAL STORAGE CANNOT STORE ARRAY AND OBJECTS
  // JSON ENCODE BEFORE STORING, CONVERT TO STRING
  localStorage.setItem("second", JSON.stringify(second));

  // (C) REDIRECT OR OPEN NEW WINDOW IF YOU WANT
  location.href = "2b-local-storage.html";
  // window.open("2b-local-storage.html");
}
</script>

<input type="button" value="Store To Local Storage" onclick="store()"/>

_3 variabel, menambahkan

<script>
function store () {
  // (A) VARIABLES TO PASS
  var first = "Foo Bar",
      second = ["Hello", "World"];

  // (B) SAVE TO LOCAL STORAGE
  // (B1) FLAT STRING OR NUMBER
  // LOCALSTORAGE.SETITEM("KEY", "VALUE");
  localStorage.setItem("first", first);
 
  // (B2) ARRAY OR OBJECT
  // LOCAL STORAGE CANNOT STORE ARRAY AND OBJECTS
  // JSON ENCODE BEFORE STORING, CONVERT TO STRING
  localStorage.setItem("second", JSON.stringify(second));

  // (C) REDIRECT OR OPEN NEW WINDOW IF YOU WANT
  location.href = "2b-local-storage.html";
  // window.open("2b-local-storage.html");
}
</script>

<input type="button" value="Store To Local Storage" onclick="store()"/>

4 string kueri di belakang URL. Yap, Javascript sepenuhnya mampu mendapatkan string kueri, dan kita dapat menggunakannya untuk mengirimkan data

4a-cookie. html

<script>
function store () {
  // (A) VARIABLES TO PASS
  var first = "Foo Bar",
      second = ["Hello", "World"];
 
  // (B) URL PARAMETERS + STORE INTO COOKIE
  // * WORKS, BUT NOT RECOMMENDED
  var params = new URLSearchParams();
  params.append("first", first);
  params.append("second", JSON.stringify(second));
  document.cookie = "pass=" + params.toString();
 
  // (C) REDIRECT
  location.href = "4b-cookie.html";
  // window.open("4b-cookie.html");
}
</script>

<input type="button" value="Go" onclick="store()"/>

4b-cookie. html

<script>
function get () {
  // (A) GET BACK PASS VARS
  var passvars = document.cookie
    .split("; ")
    .find(row => row.startsWith("pass"))
    .substring(5);
 
  // (B) PARSE BACK
  var params = new URLSearchParams(passvars),
      first = params.get("first"),
      second = JSON.parse(params.get("second"));
 
  // (C) IT WORKS!
  console.log(first);  // Foo Bar
  console.log(second); // ["Hello", "World"]
}
</script>

<input type="button" value="Get" onclick="get()"/>

Anda mungkin juga pernah mendengar tentang cookie, token kecil untuk menyimpan beberapa data… Pokoknya, jangan main-main dengan cookie kecuali benar-benar diperlukan. Pertahankan yang ini sebagai pilihan terakhir yang putus asa

METODE 5) JENDELA BARU

jendela 5a. html

<script>
function go () {
  // (A) VARIABLES TO PASS
  var first = "Foo Bar",
      second = ["Hello", "World"];
 
  // (B) OPEN NEW WINDOW
  // JUST PASS VARIABLES OVER TO NEW WINDOW
  var newwin = window.open("5b-window.html");
  newwin.onload = () => {
    newwin.first = first;
    newwin.second = second;
  };
}
</script>

<input type="button" value="GO" onclick="go()"/>

5b-jendela. html

<script>
function get () {
  console.log(first);  // Foo Bar
  console.log(second); // ["Hello", "World"]
}
</script>

<input type="button" value="Get" onclick="get()"/>

Saat kami membuat

<script>
function store () {
  // (A) VARIABLES TO PASS
  var first = "Foo Bar",
      second = ["Hello", "World"];

  // (B) SAVE TO LOCAL STORAGE
  // (B1) FLAT STRING OR NUMBER
  // LOCALSTORAGE.SETITEM("KEY", "VALUE");
  localStorage.setItem("first", first);
 
  // (B2) ARRAY OR OBJECT
  // LOCAL STORAGE CANNOT STORE ARRAY AND OBJECTS
  // JSON ENCODE BEFORE STORING, CONVERT TO STRING
  localStorage.setItem("second", JSON.stringify(second));

  // (C) REDIRECT OR OPEN NEW WINDOW IF YOU WANT
  location.href = "2b-local-storage.html";
  // window.open("2b-local-storage.html");
}
</script>

<input type="button" value="Store To Local Storage" onclick="store()"/>

_5 baru, kami dapat "langsung" memasukkan variabel ke dalam jendela baru. Sesimpel itu

BIT & LINK YANG BERMANFAAT

Itu saja untuk panduan ini, dan ini adalah bagian kecil tentang beberapa tambahan dan tautan yang mungkin berguna bagi Anda

UPDATE PROSES

Zaman Batu Internet sudah lama berlalu. Alih-alih memuat ulang dan mengarahkan ulang halaman, kita benar-benar harus menciptakan pengalaman yang "mulus" dengan teknologi modern. Misalnya, jika kita ingin membuat formulir bergaya wizard di mana pengguna memilih opsi di langkah 1, teruskan ke langkah 2 – Kita dapat menggunakan AJAX untuk menjalankan seluruh aplikasi

6a-ajax. html

<script>
function get () {
  // (A) GET FROM SESSION
  var first = sessionStorage.getItem("first"),
      second = JSON.parse(sessionStorage.getItem("second"));

  // (B) IT WORKS!
  // MANUALLY OPENING 1B-SESSION.HTML WILL NOT WORK THOUGH
  // SESSION DATA WILL PERISH ONCE TAB/WINDOW IS CLOSED
  console.log(first);  // Foo Bar
  console.log(second); // ["Hello", "World"]

  // (EXTRA) CLEAR SESSION STORAGE
  // sessionStorage.removeItem("KEY");
  // sessionStorage.clear();
}
</script>

<input type="button" value="Get From Session Storage" onclick="get()"/>

_0

6b-ajax. html

<script>
function get () {
  // (A) GET FROM SESSION
  var first = sessionStorage.getItem("first"),
      second = JSON.parse(sessionStorage.getItem("second"));

  // (B) IT WORKS!
  // MANUALLY OPENING 1B-SESSION.HTML WILL NOT WORK THOUGH
  // SESSION DATA WILL PERISH ONCE TAB/WINDOW IS CLOSED
  console.log(first);  // Foo Bar
  console.log(second); // ["Hello", "World"]

  // (EXTRA) CLEAR SESSION STORAGE
  // sessionStorage.removeItem("KEY");
  // sessionStorage.clear();
}
</script>

<input type="button" value="Get From Session Storage" onclick="get()"/>

_1

LINK dan REFERENSI

Jendela. sessionStorage – MDN
Jendela. penyimpanan lokal – MDN
Parameter Pencarian URL – MDN
Dokumen. cookie – MDN
– lag. kita
Tutorial AJAX Pemula – Kode Boxx

VIDEO TUTORIAL

LEMBAR CHEAT INFOGRAFIS

Terima kasih telah membaca, dan kami telah sampai di akhir panduan ini. Saya harap ini membantu Anda dengan proyek Anda, dan jika Anda ingin berbagi apa pun dengan panduan ini, jangan ragu untuk berkomentar di bawah ini. Semoga berhasil dan selamat membuat kode