Hướng dẫn pass data from page to page javascript - chuyển dữ liệu từ trang này sang trang khác javascript

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:

• Trên trang đầu tiên:

  • var favoritemovie = "Shrek";
    sessionStorage.setItem("favoriteMovie", favoritemovie);
    

    8

  • var favoritemovie = "Shrek";
    sessionStorage.setItem("favoriteMovie", favoritemovie);
    

    9

  • var favoritemovie = sessionStorage.getItem("favoriteMovie");
    console.log(favoritemovie);
    

    0
• Trên trang thứ hai:

  • var favoritemovie = sessionStorage.getItem("favoriteMovie");
    console.log(favoritemovie);
    

    1

  • var favoritemovie = sessionStorage.getItem("favoriteMovie");
    console.log(favoritemovie);
    

    2

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

  var favoritemovie = sessionStorage.getItem("favoriteMovie");
  console.log(favoritemovie);
  

  3. Thay vào đó, sử dụng một máy chủ web thích hợp với

  var favoritemovie = sessionStorage.getItem("favoriteMovie");
  console.log(favoritemovie);
  

  4.

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

1b-session.html

Đú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:

• var favoritemovie = sessionStorage.getItem("favoriteMovie");
  console.log(favoritemovie);
  

  5

• var favoritemovie = sessionStorage.getItem("favoriteMovie");
  console.log(favoritemovie);
  

  6

• var favoritemovie = sessionStorage.getItem("favoriteMovie");
  console.log(favoritemovie);
  

  7

• var favoritemovie = sessionStorage.getItem("favoriteMovie");
  console.log(favoritemovie);
  

  8

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

2b-local-storage.html

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

3b-query.html

var favoritemovie = "Shrek";
sessionStorage.setItem("favoriteMovie", favoritemovie);

Bạn có thể đã nghe nói về các biến

var favoritemovie = sessionStorage.getItem("favoriteMovie");
console.log(favoritemovie);

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

Phương pháp 4) Lưu trữ cookie

4a-cookie.html

var favoritemovie = "Shrek";
sessionStorage.setItem("favoriteMovie", favoritemovie);

4b-cookie.html

var favoritemovie = "Shrek";
sessionStorage.setItem("favoriteMovie", favoritemovie);

Bạ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);

5b-window.html

var favoritemovie = "Shrek";
sessionStorage.setItem("favoriteMovie", favoritemovie);

Khi 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

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

6b-ajax.html

var favoritemovie = "Shrek";
sessionStorage.setItem("favoriteMovie", favoritemovie);

Liê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!