Cách javascript lưu trữ dữ liệu trong máy chủ?

Trước HTML5, dữ liệu ứng dụng phải được lưu trữ trong cookie, được bao gồm trong mọi yêu cầu của máy chủ. Lưu trữ web an toàn hơn và lượng lớn dữ liệu có thể được lưu trữ cục bộ mà không ảnh hưởng đến hiệu suất trang web

Không giống như cookie, giới hạn lưu trữ lớn hơn nhiều (ít nhất là 5 MB) và thông tin không bao giờ được chuyển đến máy chủ

Lưu trữ web theo nguồn gốc (theo tên miền và giao thức). Tất cả các trang, từ một nguồn gốc, có thể lưu trữ và truy cập cùng một dữ liệu

---

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ Lưu trữ web

APILưu trữ Web4. 08. 03. 54. 011. 5

---

Đối tượng lưu trữ web HTML

Lưu trữ web HTML cung cấp hai đối tượng để lưu trữ dữ liệu trên máy khách

• document.cookie = ‘name1=value1’

  6 - lưu trữ dữ liệu không có ngày hết hạn

• document.cookie = ‘name1=value1’

  7 - lưu trữ dữ liệu cho một phiên (dữ liệu bị mất khi đóng tab trình duyệt)

Trước khi sử dụng lưu trữ web, hãy kiểm tra hỗ trợ trình duyệt cho localStorage và sessionStorage

if (typeof(Storage). == "undefined") {
  // ​​Mã cho localStorage/sessionStorage.
} other {
  // ​​Xin lỗi. Không hỗ trợ lưu trữ web.
}

---

---

Đối tượng lưu trữ cục bộ

Đối tượng localStorage lưu trữ dữ liệu không có ngày hết hạn. Dữ liệu sẽ không bị xóa khi đóng trình duyệt và sẽ có sẵn vào ngày, tuần hoặc năm tiếp theo

Ví dụ

// Lưu trữ
localStorage. setItem("họ", "Smith");

// Truy xuất
tài liệu. getElementById("kết quả"). bên trongHTML = localStorage. getItem("họ");

Tự mình thử »

Ví dụ giải thích

• Tạo một cặp tên/giá trị localStorage với name="lastname" và value="Smith"
• Lấy giá trị của "lastname" và chèn nó vào phần tử có id="result"

Ví dụ trên cũng có thể được viết như thế này

// Cửa hàng
localStorage. lastname = "Smith";
// Truy xuất
tài liệu. getElementById("kết quả"). bên trongHTML = localStorage. họ;

Cú pháp để xóa mục localStorage "lastname" như sau

lưu trữ cục bộ. removeItem("họ");

Ghi chú. Các cặp tên/giá trị luôn được lưu dưới dạng chuỗi. Hãy nhớ chuyển đổi chúng sang định dạng khác khi cần

Ví dụ sau đếm số lần người dùng đã nhấp vào nút, trong phiên hiện tại

Đôi khi, truy cập dữ liệu từ trình duyệt sẽ tốt hơn là gửi yêu cầu đến máy chủ. 3 cách lưu trữ dữ liệu trên trình duyệt là Cookies, Local Storage và Session Storage. Tùy thuộc vào nhu cầu, bất kỳ cái nào trong số chúng được sử dụng để lưu trữ dữ liệu trong trình duyệt

Trong bài viết hôm nay, chúng ta sẽ thảo luận về so sánh chuyên sâu giữa bộ nhớ cục bộ, bộ nhớ phiên và cookie. Bắt đầu nào

Table of Contents:· Cookies vs Local Storage vs Session Storage
· Cookies
  ∘ Access cookies with JavaScript
· Local Storage
  ∘ Access local storage with JavaScript
· Session Storage
  ∘ Access session storage with JavaScript
· Choose What To Use When

Cookie so với Lưu trữ cục bộ so với Lưu trữ phiên

Để có một sự hiểu biết cơ bản về những điểm tương đồng và khác biệt giữa chúng, hãy xem biểu đồ bên dưới

Cookie so với lưu trữ cục bộ so với lưu trữ phiên. Thẩm quyền giải quyết

Vì vậy, có một số điểm tương đồng và cũng có một số khác biệt giữa ba. Lưu trữ cục bộ và lưu trữ phiên có nhiều điểm tương đồng hơn và chúng tương đối mới. Cookie là loại lâu đời nhất trong số đó và khác biệt về nhiều mặt so với hai loại còn lại

Cả ba đều độc lập với trình duyệt. Điều đó có nghĩa là nếu một số dữ liệu được lưu trữ trong một trình duyệt, nó sẽ không được lưu trữ trong một trình duyệt khác trên cùng một máy. Ví dụ: dữ liệu được lưu trữ trong Google Chrome sẽ không được lưu trữ trong Firefox trên cùng một máy tính

Ngoài ra, những người dùng khác nhau không chia sẻ cookie hoặc bộ nhớ cục bộ giữa họ. Vì vậy, nếu một số dữ liệu được đặt cho một người dùng, thì không người dùng nào khác có thể thấy dữ liệu đó

Nếu bạn mở công cụ dành cho nhà phát triển từ trình duyệt của mình và đi tới phần “Ứng dụng”, bạn sẽ có thể thấy 3 loại bộ nhớ

3 loại lưu trữ từ trình duyệt. Tác giả chụp màn hình

Bây giờ hãy nói về từng người trong số họ

Bánh quy

Cookie là cách lưu trữ dữ liệu lâu đời nhất trong trình duyệt. Nó có sẵn trong cả HTML4 và HTML5. Về cơ bản, cookie là một số dữ liệu dựa trên văn bản với cặp tên-giá trị. Cookie chỉ có thể lưu trữ 4 KB dữ liệu nhỏ hơn nhiều so với lưu trữ cục bộ và lưu trữ phiên

Cookies là một cách thuận tiện để mang dữ liệu từ phiên này sang phiên khác trên trang web. Nó có thể được sử dụng cho mục đích xác thực và cũng để xác định trạng thái của người dùng. Ví dụ -

• Khi người dùng đăng nhập vào một trang web, máy chủ sẽ đặt cookie. Vì vậy, máy chủ có thể nhận ra rằng người dùng đã đăng nhập cho các phiên khác
• Khi mua sắm từ một trang web thương mại điện tử, nếu người dùng thêm một mặt hàng vào giỏ hàng, cookie thường được đặt. Vì vậy, nếu người dùng làm mới trang, mặt hàng đó sẽ vẫn nằm trong danh sách giỏ hàng và người dùng có thể thêm nhiều mặt hàng hơn từ trạng thái này

Truy cập cookie bằng JavaScript

Chúng tôi có thể truy cập cookie từ trình duyệt bằng thuộc tính

document.cookie = ‘name1=value1’

0. Giá trị của

document.cookie = ‘name1=value1’

0 bao gồm các cặp

document.cookie = ‘name1=value1’

2. Xem ví dụ sau

document.cookie = ‘name1=value1’

Biểu thức trên sẽ cập nhật cookie có tên 'name1' với giá trị 'value1'

Bạn có thể thấy cookie được thêm vào trình duyệt bằng cách kiểm tra trang

Một biểu thức

document.cookie = ‘name1=value1’

3 có thể thêm một cookie. Hãy thêm hai cookie nữa

document.cookie = ‘name2=value2’
document.cookie = ‘name3=value3’

Bây giờ đặt

document.cookie = ‘name1=value1’

0 sẽ hiển thị cả ba cookie

Bạn cũng có thể đưa ra cảnh báo bằng cách sử dụng

document.cookie = ‘name1=value1’

5

Lưu trữ cục bộ

Tùy thuộc vào trình duyệt, bộ nhớ cục bộ có dung lượng 5-10 MB. Nó đã được giới thiệu trong HTML5. Bộ nhớ cục bộ chỉ lưu trữ dữ liệu trong trình duyệt và không bao giờ hết hạn trừ khi bị xóa thủ công. Bộ nhớ cục bộ có thể được truy cập từ bất kỳ cửa sổ nào. Điều đó có nghĩa là nếu người dùng đóng bộ nhớ cục bộ của trình duyệt sẽ được lưu vào lần tiếp theo khi người dùng mở lại

Truy cập bộ nhớ cục bộ bằng JavaScript

Bạn có thể truy cập bộ nhớ cục bộ bằng cách sử dụng thuộc tính

document.cookie = ‘name1=value1’

6. Kho lưu trữ cục bộ là các giá trị chuỗi có cặp khóa-giá trị. Xem ví dụ bên dưới

document.cookie = ‘name1=value1’

0

Ba mục trong bộ nhớ cục bộ được thêm vào

Phương thức

document.cookie = ‘name1=value1’

7 đặt giá trị cho bộ nhớ cục bộ. Phương thức

document.cookie = ‘name1=value1’

8 sẽ lấy các mục từ bộ nhớ cục bộ. Bạn cần đặt khóa bên trong

document.cookie = ‘name1=value1’

8 để nhận giá trị. Sử dụng

document.cookie = ‘name2=value2’
document.cookie = ‘name3=value3’

0, sau đó bạn có thể in các giá trị

document.cookie = ‘name1=value1’

5

document.cookie = ‘name2=value2’
document.cookie = ‘name3=value3’

1 sẽ xóa toàn bộ bộ nhớ cục bộ

Để xóa một mục, bạn có thể sử dụng

document.cookie = ‘name2=value2’
document.cookie = ‘name3=value3’

2. Một lần nữa, bạn cần đặt khóa bên trong phương thức

document.cookie = ‘name1=value1’

8

Sau khi loại bỏ

document.cookie = ‘name2=value2’
document.cookie = ‘name3=value3’

3

document.cookie = ‘name2=value2’
document.cookie = ‘name3=value3’

4 sẽ trả về

document.cookie = ‘name2=value2’
document.cookie = ‘name3=value3’

5

Bạn cũng có thể lưu một mảng vào bộ nhớ cục bộ

document.cookie = ‘name1=value1’

2

Mảng

document.cookie = ‘name2=value2’
document.cookie = ‘name3=value3’

6 sẽ được lưu trữ trong bộ lưu trữ cục bộ. Nhưng toàn bộ mảng sẽ được lưu trữ dưới dạng một chuỗi. Để giải quyết vấn đề này, bạn có thể sử dụng

document.cookie = ‘name2=value2’
document.cookie = ‘name3=value3’

7 và

document.cookie = ‘name2=value2’
document.cookie = ‘name3=value3’

8

document.cookie = ‘name1=value1’

6

Bây giờ điều này sẽ được lưu trữ dưới dạng một đối tượng JavaScript

Vì vậy, có bốn thao tác chính trong bộ nhớ cục bộ

document.cookie = ‘name1=value1’

7

Lưu trữ phiên

Lưu trữ phiên chủ yếu tương tự như lưu trữ cục bộ. Sự khác biệt duy nhất là bộ nhớ phiên sẽ bị xóa sau một phiên. Điều đó có nghĩa là nếu bạn lưu thứ gì đó trong bộ nhớ phiên và đóng trình duyệt của mình, bạn sẽ không thể xem dữ liệu sau khi mở lại trình duyệt. Lưu trữ phiên có dung lượng 5 MB

Truy cập bộ nhớ phiên bằng JavaScript

Tất cả các hoạt động được mô tả trong bộ nhớ cục bộ cũng hợp lệ cho bộ nhớ phiên. Để truy cập bộ nhớ phiên, bạn cần sử dụng thuộc tính

document.cookie = ‘name2=value2’
document.cookie = ‘name3=value3’

9. Những thứ khác khá giống với bộ nhớ cục bộ

Để thêm dữ liệu vào bộ nhớ phiên, bạn sẽ sử dụng

document.cookie = ‘name1=value1’

00 với cặp khóa-giá trị

document.cookie = ‘name1=value1’

0

Ghi chú.

document.cookie = ‘name1=value1’

01 ở đó vì tôi đang sử dụng tiện ích mở rộng máy chủ trực tiếp từ VS Code

Như bạn có thể thấy

document.cookie = ‘name1=value1’

02 được thêm vào bộ lưu trữ phiên.

document.cookie = ‘name1=value1’

03,

document.cookie = ‘name1=value1’

04 và

document.cookie = ‘name1=value1’

05 sẽ hoạt động giống hệt như lưu trữ cục bộ

Nếu bạn đóng tab trình duyệt, bộ nhớ phiên sẽ biến mất

Lưu trữ cục bộ và lưu trữ phiên cùng nhau có thể được gọi là lưu trữ web. Lưu trữ web được sử dụng để lưu dữ liệu để truy cập nhanh. Thích dữ liệu tùy chỉnh của người dùng. Ví dụ -

• Giả sử một trang web có chế độ sáng/tối. Nếu người dùng đặt chế độ tối trong trình duyệt, dữ liệu có thể được lưu trữ trong bộ nhớ cục bộ. Dữ liệu chỉ được lưu trong bộ nhớ cục bộ cho người dùng này. Bằng cách này, khi người dùng mở lại trang web từ trình duyệt, chế độ tối sẽ tự động được bật

Chọn cái gì sẽ sử dụng khi nào

Vì vậy, làm thế nào bạn có thể chọn giữa ba? . Nếu bạn cần lưu trữ một số dữ liệu trong trình duyệt và luôn giữ dữ liệu đó cho người dùng, bạn sẽ sử dụng bộ nhớ cục bộ. Mặt khác, nếu bạn muốn xóa dữ liệu sau mỗi phiên, bạn sẽ sử dụng lưu trữ phiên. Nếu máy chủ cần một số dữ liệu như khóa xác thực, bạn sẽ sử dụng cookie

Vì vậy, trường hợp sử dụng phụ thuộc vào nhu cầu

Điều này là dành cho hôm nay. Tôi hy vọng bạn hiểu rõ về cookie, bộ nhớ cục bộ và bộ nhớ phiên từ bài viết này. Cảm ơn vì đã đọc

JavaScript gửi dữ liệu đến máy chủ như thế nào?

JavaScript lưu trữ dữ liệu như thế nào?

Làm thế nào dữ liệu có thể được lưu trữ trong máy chủ?

Chúng tôi có thể lưu trữ dữ liệu trong máy chủ Web không?