Chuyển giá trị từ trang html này sang trang html khác bằng javascript

Chào mừng bạn đến với hướng dẫn về cách chuyển biến giữa các trang trong Javascript. Cần chuyển một số dữ liệu giữa các trang khác nhau?

Một cách dễ dàng để chuyển các biến giữa các trang là sử dụng chuỗi truy vấn

  • Trên trang đầu tiên
    • 
      
      
      2
    • 
      
      
      3
    • 
      
      
      4
  • Trên trang thứ hai
    • 
      
      
      5
    • 
      
      
      6

Nhưng có nhiều phương pháp hơn mà chúng ta có thể sử dụng. Chúng ta hãy xem qua một số ví dụ trong hướng dẫn này và đâu là cách tốt hơn để giải quyết mọi việc – Đọc tiếp

ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào

 

 

TRANG TRÌNH BÀY NHANH

Chuyển giá trị từ trang html này sang trang html khác bằng javascript
Tải xuống & Ghi chú
Chuyển giá trị từ trang html này sang trang html khác bằng javascript
Truyền biến
Chuyển giá trị từ trang html này sang trang html khác bằng javascript
Bit và liên kết hữu ích
Chuyển giá trị từ trang html này sang trang html khác bằng javascript
Video hướng dẫn
Chuyển giá trị từ trang html này sang trang html khác bằng javascript
The End

 

TẢI XUỐNG & LƯU Ý

Đầu tiên, đây là liên kết tải xuống 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
    
    
    
    7. Thay vào đó, hãy sử dụng một máy chủ web phù hợp với
    
    
    
    8
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 cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình

 

MÃ VÍ DỤ TẢI XUỐNG

Nhấp 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 mã nguồn hoặc sử dụng nó trong dự án của riêng bạn

 

 

CÁCH CHUYỂN BIẾN GIỮA CÁC TRANG

Được rồi, bây giờ chúng ta hãy tìm hiểu cách truyền biến giữa các trang trong Javascript

 

PHƯƠNG PHÁP 1) LƯU TRỮ PHIÊN

1a-buổi. html



phiên 1b. html



Đúng, không cần bất kỳ mánh lới quảng cáo nào. Có một khu vực lưu trữ “hộp cát” tạm thời trong Javascript được gọi là lưu trữ phiên. Rất dễ sử dụng, chỉ có 4 chức năng để biết

  • 
    
    
    9
  • 
    
    
    00
  • 
    
    
    01
  • 
    
    
    02

Nhưng xin lưu ý rằng bộ nhớ phiên sẽ tự động bị xóa sau khi người dùng đóng tab/cửa sổ

P. S. Dữ liệu cũng sẽ không được chuyển khi người dùng mở tab/cửa sổ khác theo cách thủ công

 

 

PHƯƠNG PHÁP 2) LƯU TRỮ CỤC BỘ

2a-lưu trữ cục bộ. html



0

2b-lưu trữ cục bộ. html



4

Trông quen quen? . Đúng, cùng một khu vực lưu trữ tạm thời cũ, nhưng bộ nhớ cục bộ là cố định – Mọi thứ được đặt trong bộ nhớ cục bộ sẽ ở lại cho đến khi bị xóa thủ công;

 

PHƯƠNG PHÁP 3) THAM SỐ URL

truy vấn 3a. html



5

truy vấn 3b. html



6

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



03, nối thêm chuỗi truy vấn


04 phía sau URL. Đúng, Javascript hoàn toàn có khả năng nhận chuỗi truy vấn và chúng tôi có thể sử dụng chuỗi đó để truyền dữ liệu

 

 

PHƯƠNG PHÁP 4) BẢO QUẢN BÁNH QUY

4a-cookie. html



9

4b-cookie. html



0

Bạn cũng có thể đã nghe nói về cookie, một mã thông báo nhỏ để lưu giữ một số dữ liệu… Dù sao, đừ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 phương sách tuyệt vọng cuối cùng

 

PHƯƠNG PHÁP 5) CỬA SỔ MỚI

cửa sổ 5a. html



1

cửa sổ 5b. html



2

Khi tạo một



05 mới, chúng ta 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

 

 

BIT & LIÊN KẾT HỮU ÍCH

Đó là tất cả cho hướng dẫn này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn

 

CẬP NHẬT CÁC QUY TRÌNH

Thời kỳ đồ đá của Internet đã qua lâu rồ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” với các công nghệ hiện đại. Ví dụ: nếu chúng tôi muốn tạo một biểu mẫu kiểu trình hướng dẫn trong đó người dùng chọn một tùy chọn ở bước 1, sau đó chuyển nó sang bước 2 – Chúng tôi có thể sử dụng AJAX để điều khiển toàn bộ ứng dụng

6a-ajax. html



0

6b-ajax. html



1

 

 

LIÊN KẾT và THAM KHẢO

  • Cửa sổ. lưu trữ phiên – MDN
  • Cửa sổ. lưu trữ cục bộ – MDN
  • Tham số tìm kiếm URL – MDN
  • Tài liệu. cookie – MDN
  • Chuyển các biến Javascript sang một trang khác – lage. chúng ta
  • Hướng dẫn AJAX cho người mới bắt đầu – Code Boxx

 

VIDEO HƯỚNG DẪN

 

BẢNG CHEAT INFOGRAPHIC

Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của 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