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" title="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" title="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" title="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" title="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" title="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" title="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" title="get()"/>8 sebagai gantinya
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" title="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" title="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" title="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" title="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" title="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" title="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" title="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" title="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" title="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" title="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" title="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" title="store()"/>4 di belakang URL. Yap, Javascript sepenuhnya mampu mendapatkan string kueri, dan kita dapat menggunakannya untuk mengirimkan data
METODE 4) PENYIMPANAN COOKIE
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" title="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" title="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" title="go()"/>5b-jendela. html
<script> function get () { console.log(first); // Foo Bar console.log(second); // ["Hello", "World"] } </script> <input type="button" value="Get" title="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" title="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" title="get()"/>06b-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" title="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