Cara meneruskan variabel javascript ke kueri sql

Question

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

Table of Contents Show

SLIDE CEPAT
UNDUH & CATATAN
CATATAN CEPAT
DOWNLOAD KODE CONTOH
CARA MELEWATI VARIABEL ANTAR HALAMAN
METODE 1) PENYIMPANAN SESI
METODE 2) PENYIMPANAN LOKAL
METODE 3) PARAMETER URL
METODE 4) PENYIMPANAN COOKIE
METODE 5) JENDELA BARU
BIT & LINK YANG BERMANFAAT
UPDATE PROSES
LINK dan REFERENSI
VIDEO TUTORIAL
LEMBAR CHEAT INFOGRAFIS
Bisakah saya meneruskan variabel ke kueri SQL?
Bagaimana cara menggunakan variabel JavaScript dalam kueri mysql?
Bisakah JavaScript digunakan untuk meminta data dalam database?
Bagaimana menggunakan data JavaScript di SQL?

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 berfungsi 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 string kueri

<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 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

Bisakah saya meneruskan variabel ke kueri SQL?

Sintaks untuk menetapkan nilai ke variabel SQL dalam kueri SELECT adalah @ var_name. = value , dengan var_name adalah nama variabel dan value adalah nilai yang Anda ambil . Variabel dapat digunakan dalam kueri berikutnya di mana pun ekspresi diizinkan, seperti dalam klausa WHERE atau dalam pernyataan INSERT.

Bagaimana cara menggunakan variabel JavaScript dalam kueri mysql?

js, terima kasih. var bagian = []; . createConnection({host. "127. 0

Bisakah JavaScript digunakan untuk meminta data dalam database?

SQL. js adalah library JavaScript yang memungkinkan Anda membuat dan mengkueri database relasional sepenuhnya di browser. Ini menggunakan file database virtual yang disimpan di memori browser, sehingga tidak mempertahankan perubahan yang dibuat pada database