Giữ giá trị sau khi làm mới javascript

Theo mặc định, khi người dùng làm mới hoặc tải lại một trang web, tất cả các biến trên trang đó sẽ được đặt lại và gán lại dữ liệu. Nhưng đôi khi bạn có thể cần duy trì các biến giữa các lần tải trang. Ví dụ: bạn có thể muốn theo dõi tab đang hoạt động hiện tại trên trang của mình và giữ lại tab đó ngay cả khi người dùng làm mới trang của họ. Trong bài viết này, chúng ta sẽ tìm hiểu cách duy trì biến giữa các lần làm mới hoặc giữ giá trị sau khi tải lại trang. Bạn có thể sử dụng nó để lưu trữ dữ liệu ở phía máy khách của trang web hoặc ứng dụng web của bạn

Cách duy trì các biến giữa các lần tải trang

Có hai cách để duy trì các biến giữa các lần tải trang

1. Sử dụng chuỗi truy vấn

Một trong những cách đơn giản nhất để bảo toàn giá trị của các biến khi tải trang là chuyển chúng dưới dạng chuỗi truy vấn trong URL được yêu cầu. Ví dụ: giả sử bạn muốn tải http. //thí dụ. com/nhà. html và biến 'a' của bạn có giá trị 1 trên trang này. Khi người dùng nhấp vào nút để làm mới trang hoặc cách khác, bạn có thể yêu cầu URL dưới dạng http. //thí dụ. com/nhà. html?a=1 thay vì chỉ yêu cầu http. //thí dụ. com/nhà. html. Trong trường hợp này, chúng tôi đã bao gồm biến có giá trị của nó dưới dạng chuỗi truy vấn trong URL được yêu cầu

Trên trang được hiển thị cho URL trên, hãy thêm đoạn mã sau

const params = new Proxy[new URLSearchParams[window.location.search], {
  get: [searchParams, prop] => searchParams.get[prop],
}];
// Get the value of "key a" in eg "//example.com/home.html?a=1"
let value = params.a; // "1"

Đoạn mã trên phân tích tất cả các biến chuỗi truy vấn thành một đối tượng JS. Giờ đây, bạn có thể gán giá trị trên cho biến trên trang của mình để giữ lại giá trị đó

var a=value;

2. Sử dụng lưu trữ web

Kỹ thuật trên hoạt động đối với các yêu cầu GET nhưng nếu bạn muốn duy trì các biến trong các yêu cầu POST hoặc nếu bạn có nhiều dữ liệu cần lưu trữ, thì bạn cần sử dụng bộ lưu trữ trên web

Với HTML5, các trình duyệt cung cấp các đối tượng localStorage và sessionStorage cho phép bạn lưu trữ dữ liệu cục bộ để có thể truy xuất sau này khi bạn làm mới trang hoặc chuyển đến một trang khác. localStorage lưu trữ dữ liệu của bạn cho đến khi bạn xóa dữ liệu theo cách thủ công hoặc theo chương trình trong khi sessionStorage chỉ lưu trữ dữ liệu miễn là phiên hiện tại của bạn đang diễn ra

Cả localStorage và sessionStorage đều lưu trữ thông tin dưới dạng các cặp khóa-giá trị

Đây là cú pháp để lưu trữ dữ liệu trong chúng bằng hàm setItem[]

sessionStorage.setItem[variable, value];
localStorage.setItem[variable, value];

Dưới đây là một vài ví dụ về cùng một

sessionStorage.setItem['clicked', true];
localStorage.setItem['checked', true];

Đây là lệnh để lấy các biến từ chúng bằng hàm getItem[] và lưu trữ chúng trong các biến

var clicked = sessionStorage.getItem['clicked'];
var checked = sessionStorage.getItem['checked'];

Đây là lệnh để loại bỏ các cặp khóa-giá trị này theo chương trình

sessionStorage.removeItem['clicked'];
localStorage.removeItem['checked'];

3. Sử dụng Cookie

Mặc dù cookie chủ yếu dành cho máy chủ nhưng bạn cũng có thể sử dụng nó để lưu trữ dữ liệu phía máy khách. Đây là một cách đơn giản để lưu trữ thông tin bằng cookie trong jQuery

$.cookie[variable, value, time_limit]; 

Đây là một ví dụ

$.cookie['clicked', 'true', {expires: 1}]; // expires in 1 day

Đây là cách lưu trữ dữ liệu trong cookie bằng JavaScript đơn giản

Trong bài viết này, chúng ta đã học được một số cách để duy trì các biến giữa các lần tải trang. Bạn có thể sử dụng bất kỳ phương pháp nào trong số này tùy thuộc vào yêu cầu của bạn

người hướng dẫn. [0. 00] Chúng tôi sẽ bắt đầu bằng cách thêm một vùng văn bản vào chỉ mục của chúng tôi. html. Chúng tôi sẽ đặt tên cho nó là Scratchpad và đặt cho nó một ID là Scratchpad. Bên trong chỉ mục của chúng tôi. js, chúng ta có thể lập tài liệu bộ chọn truy vấn và chọn ID bằng #Scratchpad. Sau đó, chúng tôi sẽ gán một biến Scratchpad cho kết quả đó. Ngay bây giờ, khi chúng tôi làm mới, chúng tôi có vùng văn bản của mình và điều này sẽ đại diện cho vùng văn bản đó

[0. 32] Hãy tiếp tục và thêm một trình lắng nghe sự kiện. Thêm trình xử lý sự kiện vào Scratchpad của chúng tôi. Chúng tôi sẽ kiểm tra key-up nơi một người nhả một phím trên bàn phím và chuyển vào một cuộc gọi lại nơi chúng tôi có thể xử lý sự kiện

[0. 46] Ngay bây giờ, chúng ta sẽ điều khiển đăng xuất sự kiện. Nếu tôi làm mới và tôi nhập nội dung nào đó, bạn có thể thấy tất cả các sự kiện bàn phím này diễn ra

[0. 56] Để lưu trữ dữ liệu của Scratchpad trong trình duyệt, chúng ta có thể sử dụng cái gọi là bộ nhớ cục bộ và giả sử, đặt mục. Chúng tôi sẽ gọi đây là ghi chú. Chúng tôi muốn đặt nó vào sự kiện. Mục tiêu. giá trị, là sự kiện là sự kiện bàn phím đó, mục tiêu là vùng văn bản này và giá trị là dữ liệu bên trong nó. Bạn sẽ nhận được kết quả tương tự bằng cách sử dụng bàn di chuột. giá trị, vì vậy một trong hai phương pháp sẽ hoạt động tốt

[1. 23] Nếu tôi làm mới ngay bây giờ và tôi bắt đầu nhập và tôi chuyển đến ứng dụng, tôi sẽ kiểm tra bộ nhớ cục bộ. Bạn có thể thấy rằng chúng tôi có một phím ghi chú và giá trị bắt đầu gõ. Mỗi khi tôi gõ một cái gì đó mới, bản cập nhật này. Khi tôi làm mới, nó sẽ biến mất mặc dù giá trị này vẫn còn trong trình duyệt

[1. 48] Để lấy giá trị đó ra, giả sử bàn di chuột. giá trị bằng bộ nhớ cục bộ. get-item-and-get-the-notes. Chúng tôi sẽ nhấn lưu ở đó. Khi tôi nhấn làm mới ngay bây giờ, nó sẽ điền vào vùng văn bản các ghi chú từ bộ nhớ cục bộ của chúng tôi

[2. 08] Lưu giá trị của nó mỗi lần nhấn phím là khá tích cực, vì vậy hãy thiết lập một cách để chỉ lưu nếu chúng ta ngừng gõ trong khoảng một giây. Trong trình xử lý sự kiện của chúng tôi, chúng tôi sẽ tạo một thời gian chờ đã đặt để chức năng chạy sau một khoảng thời gian, vì vậy tôi sẽ đặt một giây

[2. 28] Nó sẽ chạy mã tôi nhập vào bên trong đây sau một giây trôi qua sau khi nhập khóa. Nếu tôi điều khiển sự kiện nhật ký. Mục tiêu. giá trị và quay lại bảng điều khiển, sẽ có độ trễ một giây. Bạn có thể thấy các giá trị này xuất hiện sau một giây sau khi nhấn phím

[2. 51] Đó không hoàn toàn là hành vi chúng tôi muốn. Chúng tôi thực sự muốn hủy bỏ thời gian chờ này nếu một phím khác được nhấn trước khi hết thời gian chờ. Chúng tôi có thể thiết lập hủy, vì vậy hãy hủy và gán nó cho thời gian chờ này vì việc hủy này trả về một tham chiếu đến bộ đếm thời gian đó

[3. 08] Chúng ta có thể chỉ cần kiểm tra xem lệnh hủy có tồn tại hay không, sau đó xóa thời gian chờ bằng ID của lệnh hủy, nghĩa là bạn nhấn một phím, nó sẽ kiểm tra xem lệnh hủy có tồn tại không. Nếu nó làm, nó xóa nó. Bây giờ, hành vi, nếu tôi làm mới, bạn sẽ thấy đầu ra khi tôi ngừng nhập trong một giây và bạn sẽ thấy nó biến mất một giây sau khi tôi nhập xong

[3. 34] Thay vì chỉ đăng xuất cái này ở đây, hãy tiếp tục và đặt bộ nhớ cục bộ của chúng ta ở đây. Tôi sẽ dán nó vào đó. Bây giờ chúng ta có thể chuyển trở lại ứng dụng của mình. Tôi sẽ làm mới ở đây, và tôi sẽ xóa cái này và bắt đầu nhập. Bạn sẽ thấy điều này sẽ cập nhật một giây sau. Nhập thêm một số và cập nhật sau một giây chậm trễ

Làm cách nào để giữ dữ liệu sau khi làm mới trang JavaScript?

Làm cách nào để giữ lại một giá trị trong JavaScript?

Làm cách nào để tải lại trang bằng JavaScript?

Biến nào bị xóa trong JavaScript khi đóng trang?