Có hai cách để vượt qua các biến giữa các trang web. Phương pháp đầu tiên là sử dụng sessionStorage hoặc localStorage. Phương pháp thứ hai là sử dụng chuỗi truy vấn & nbsp; với URL.
sessionStorage hoặc localStorage:
// This goes in the first web page:
// favoriteMovie is the sessionStorage variable name
// Shrek is the variable string value
sessionStorage.setItem["favoriteMovie", "Shrek"];
// This goes in the second web page:
// Retrieve the sessionStorage variable
var favoriteMovie = sessionStorage.getItem['favoriteMovie'];
Ví dụ 1:
JavaScript trong trang 1:
var favoritemovie = "Shrek";
sessionStorage.setItem["favoriteMovie", favoritemovie];
JavaScript trong trang 2:
var favoritemovie = sessionStorage.getItem["favoriteMovie"];
console.log[favoritemovie];
In kết quả này trong bảng điều khiển: Shrek
Shrek
Ví dụ 2:
Bạn có thể chuyển một mảng từ trang này sang trang khác bằng cách chuyển đổi mảng thành một chuỗi trước khi lưu sang một biến trong sessionStorage.
Mảng JavaScript trong trang 1:
jsarray = ["cat", "dog", "tiger", "wolf"];
sessionStorage.setItem["jsArray", JSON.stringify[jsarray]];
// JSON.stringify[jsArray] converts the jsArray into a string which can be stored in sessionStorage
Mảng JavaScript trong trang 2:
jsarray = JSON.parse[sessionStorage.getItem["jsArray"]];
// the javascript array jsarray is now in Page 2 as ['cat', 'dog', 'tiger', 'wolf']
Phương pháp 2
Tất nhiên có một cách khác để làm điều đó ...
Chuyển một chuỗi dưới dạng tham số.
Example:
Go to filename
Khi nhấp vào FileName được nhấp, fileName.html được tải với chuỗi truy vấn "? Data1 | data2 | data3" được gắn vào tên tệp trong thanh địa chỉ. Để lấy chuỗi truy vấn thành các biến, sử dụng: var queryString & nbsp; = location.search.subString [1];?data1|data2|data3"
appended to the filename in the address bar. To get the query string into variables,
use: var queryString = location.search.substring[1];
Biến & nbsp; queryString & nbsp; hiện có giá trị & nbsp; "data1 | data2 | data3".
Để chia chúng thành các biến riêng lẻ, hãy sử dụng Split:
var a = queryString.split ["|"]; // tạo ra một mảng // which creates an array
Sau đó lấy các giá trị ra khỏi mảng và đặt chúng thành các biến:
var value1 = a [0]; var value2 = a [1]; var value3 = a [2];a[0];
var value2
= a[1];
var value3 = a[2];
Bây giờ: value1 == "data1", value2 == "data2", value3 == "data3"
value1 == "data1", value2 == "data2", value3 == "data3"
Chào mừng bạn đến với một hướng dẫn về cách vượt qua các biến giữa các trang trong JavaScript. Cần truyền một số dữ liệu giữa các trang khác nhau? Một cách dễ dàng để vượt qua các biến giữa các trang là sử dụng chuỗi truy vấn:
8var favoritemovie = "Shrek";
sessionStorage.setItem["favoriteMovie", favoritemovie];
9var favoritemovie = "Shrek";
sessionStorage.setItem["favoriteMovie", favoritemovie];
0var favoritemovie = sessionStorage.getItem["favoriteMovie"];
console.log[favoritemovie];
1var favoritemovie = sessionStorage.getItem["favoriteMovie"];
console.log[favoritemovie];
2var favoritemovie = sessionStorage.getItem["favoriteMovie"];
console.log[favoritemovie];
Nhưng có nhiều phương pháp mà chúng ta có thể sử dụng. Hãy để chúng tôi đi qua một số ví dụ trong hướng dẫn này, và cách tốt hơn để đối phó với mọi thứ - đọc tiếp!
Tôi đã bao gồm một tệp zip với tất cả các mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không phải sao chép mọi thứ, hoặc nếu bạn chỉ muốn đi thẳng vào.
Slide nhanh
MỤC LỤC
Tải xuống & ghi chú
Thứ nhất, đây là liên kết tải xuống đến mã ví dụ như đã hứa.
Ghi chú nhanh
- Hãy lưu ý rằng một số ví dụ này sẽ không hoạt động với
3. Thay vào đó, sử dụng một máy chủ web thích hợp vớivar favoritemovie = sessionStorage.getItem["favoriteMovie"]; console.log[favoritemovie];
4.var favoritemovie = sessionStorage.getItem["favoriteMovie"]; console.log[favoritemovie];
Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới, nếu bạn cần câu trả lời khẩn cấp, vui lòng kiểm tra danh sách các trang web của tôi để nhận trợ giúp lập trình.
Mã hóa ví dụ Tải xuống
Nhấn vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên đó hoặc sử dụng nó trong dự án của riêng bạn.
Được rồi, bây giờ chúng ta hãy đi vào các cách để vượt qua các biến giữa các trang trong JavaScript.
Phương pháp 1] Lưu trữ phiên
1a-session.html
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"];
}
1b-session.html
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[];
}
Đúng, không cần bất kỳ mánh lới quảng cáo. Có một khu vực lưu trữ hộp cát Sandbox tạm thời trong JavaScript có tên là Storage Storage. Rất dễ sử dụng, chỉ có 4 chức năng để biết:
5var favoritemovie = sessionStorage.getItem["favoriteMovie"]; console.log[favoritemovie];
6var favoritemovie = sessionStorage.getItem["favoriteMovie"]; console.log[favoritemovie];
7var favoritemovie = sessionStorage.getItem["favoriteMovie"]; console.log[favoritemovie];
8var favoritemovie = sessionStorage.getItem["favoriteMovie"]; console.log[favoritemovie];
Nhưng xin lưu ý rằng bộ lưu trữ phiên sẽ tự động bị xóa khi người dùng đóng tab/cửa sổ.
P.S. Dữ liệu cũng sẽ không được truyền khi người dùng mở thủ công tab/cửa sổ khác.
Phương pháp 2] Lưu trữ cục bộ
2a-local-storage.html
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"];
}
2b-local-storage.html
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[];
}
Trông quen thuộc? Bởi vì lưu trữ cục bộ là anh em họ lưu trữ phiên. Đúng, cùng một khu vực lưu trữ tạm thời cũ, nhưng lưu trữ cục bộ vẫn tồn tại - bất cứ thứ gì được đặt trong kho lưu trữ cục bộ sẽ ở lại cho đến khi bị xóa thủ công; Đúng, chúng tôi vẫn có thể lấy dữ liệu từ bộ lưu trữ cục bộ ngay cả sau khi cửa sổ được đóng và mở lại sau đó.
Phương pháp 3] Tham số URL
3a-query.html
var favoritemovie = "Shrek";
sessionStorage.setItem["favoriteMovie", favoritemovie];
03b-query.html
var favoritemovie = "Shrek";
sessionStorage.setItem["favoriteMovie", favoritemovie];
1Bạn có thể đã nghe nói về các biến
var favoritemovie = sessionStorage.getItem["favoriteMovie"];
console.log[favoritemovie];
9, nối thêm chuỗi truy vấn jsarray = ["cat", "dog", "tiger", "wolf"];
sessionStorage.setItem["jsArray", JSON.stringify[jsarray]];
// JSON.stringify[jsArray] converts the jsArray into a string which can be stored in sessionStorage
0 phía sau URL. Đúng, JavaScript hoàn toàn có khả năng nhận chuỗi truy vấn và chúng ta có thể sử dụng nó để truyền dữ liệu.Phương pháp 4] Lưu trữ cookie
4a-cookie.html
var favoritemovie = "Shrek";
sessionStorage.setItem["favoriteMovie", favoritemovie];
24b-cookie.html
var favoritemovie = "Shrek";
sessionStorage.setItem["favoriteMovie", favoritemovie];
3Bạn cũng có thể đã nghe nói về cookie, một mã thông báo nhỏ để giữ một số dữ liệu, dù sao đi nữa, chỉ cần không gây rối với cookie trừ khi thực sự cần thiết. Giữ cái này như một khu nghỉ mát tuyệt vọng cuối cùng.
Phương pháp 5] Cửa sổ mới
5a-window.html
var favoritemovie = "Shrek";
sessionStorage.setItem["favoriteMovie", favoritemovie];
45b-window.html
var favoritemovie = "Shrek";
sessionStorage.setItem["favoriteMovie", favoritemovie];
5Khi chúng tôi tạo một
jsarray = ["cat", "dog", "tiger", "wolf"];
sessionStorage.setItem["jsArray", JSON.stringify[jsarray]];
// JSON.stringify[jsArray] converts the jsArray into a string which can be stored in sessionStorage
1 mới, chúng tôi có thể trực tiếp chèn các biến vào cửa sổ mới. Đơn giản vậy thôi.Cập nhật các quy trình!
Thời đại đồ đá của Internet là quá khứ dài. Thay vì tải lại và chuyển hướng các trang, chúng ta thực sự nên xem xét việc tạo ra một trải nghiệm liền mạch trên mạng với các công nghệ hiện đại. Ví dụ: nếu chúng ta muốn tạo biểu mẫu kiểu phù thủy trong đó người dùng chọn một tùy chọn trong bước 1, thì hãy chuyển nó sang bước 2-chúng ta có thể sử dụng AJAX để lái toàn bộ ứng dụng.
6a-ajax.html
var favoritemovie = "Shrek";
sessionStorage.setItem["favoriteMovie", favoritemovie];
66b-ajax.html
var favoritemovie = "Shrek";
sessionStorage.setItem["favoriteMovie", favoritemovie];
7Liên kết & Tài liệu tham khảo
- Window.SessionStorage - MDN
- Window.LocalStorage - MDN
- Thông số tìm kiếm URL - MDN
- Document.Cookie - Mdn
- Chuyển các biến JavaScript sang trang khác - Lage.us
- Hướng dẫn Ajax của người mới bắt đầu - mã Boxx
Video hướng dẫn
Bảng gian lận infographic
KẾT THÚC
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cuối hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc!