Hướng dẫn how does javascript store data? - javascript lưu trữ dữ liệu như thế nào?

Cách lưu trữ dữ liệu với LocalStorage và SessionStorage. Lợi ích của từng

localStorage và sessionStorage là các đối tượng lưu trữ web mà bạn có thể sử dụng để lưu thông tin trên trình duyệt. Dữ liệu được thêm vào sessionStorage có thể tải lại trang máng và localStorage giữ dữ liệu của bạn ngay cả khi trình duyệt đóng và mở lại.

Các kho này cung cấp một số tính năng thú vị. Chúng khác với cookie không được gửi đến máy chủ với mỗi yêu cầu, cho phép nó lớn hơn (hầu hết các trình duyệt có ít nhất 2 MB). Tất cả mọi thứ được thực hiện máng JavaScript, không có sự can thiệp nào với dữ liệu của các tiêu đề HTTP của máy chủ. Mỗi bộ lưu trữ được xác định bởi miền triplet, giao thức, cổng, do đó, dữ liệu từ một ứng dụng này không thể được truy cập bởi một ứng dụng khác.

Các đối tượng lưu trữ này cung cấp các phương thức và thuộc tính tương tự:

• setItem(key, value) Cặp phím/giá trị lưu trữ.
• getItem(key) nhận được giá trị theo khóa.
• removeItem(key) Tháo khóa và giá trị.
• clear() Xóa mọi thứ từ bộ nhớ.
• key(index) Nhận chìa khóa từ một vị trí nhất định.
• length Số lượng các mặt hàng được lưu trữ.

Để hiểu điều này tốt hơn một chút, hãy xem qua một số ví dụ.

lưu trữ cục bộ

Dữ liệu trên localStorage được chia sẻ giữa tất cả các cửa sổ trình duyệt từ cùng một nguồn gốc (hãy nhớ bộ ba: miền, giao thức, cổng). Ngoài ra, nó được giữ cục bộ trên đĩa, do đó có tên, vì vậy nó sẽ tồn tại ngay cả khi khởi động lại hệ điều hành.

Miễn là bạn giữ bộ ba nhất quán, bạn có thể lưu trữ dữ liệu với sessionStorage1 trên một cửa sổ và đọc nó với sessionStorage2 trên một cửa sổ khác. Lưu ý rằng bạn có thể thay đổi URL, chỉ có tên miền phải giống nhau.

Một thực tế thú vị khác là cùng một thông tin sẽ có sẵn cho tất cả các cửa sổ của cùng một bộ ba. Những thay đổi trên cái này sẽ được phản ánh trên người kia.same information will be available to all windows of the same triplet. Changes on one will be reflected on the other.

Truy cập dữ liệu trên LocalStorage

Bạn có thể sử dụng các phương thức được liệt kê ở trên để truy xuất dữ liệu hoặc sử dụng một đối tượng như ký hiệu. Ký hiệu đối tượng rõ ràng hơn, nhưng nó mở ra một số lỗi. Ở đây bạn sẽ thấy những gì tôi muốn nói.

Trên dòng 12, chúng tôi cố gắng thêm giá trị sessionStorage3 vào khóa sessionStorage4, nhưng sử dụng ký hiệu đối tượng JavaScript nghĩ rằng chúng tôi đang đề cập đến thuộc tính length và cho chúng tôi một lỗi.

Trên dòng 15, chúng tôi làm điều tương tự, nhưng vì chúng tôi đang sử dụng phương thức sessionStorage7 của ____ 0, JavaScript biết rằng chúng tôi muốn đặt giá trị cho phím 'Độ dài'.

Liệt kê tất cả các khóa

Bạn có nhiều hơn một cách để lặp qua tất cả các phím trên localStorage, nhưng nó không phải là một điều khác, vì vậy chúng không thẳng về phía trước. Bạn có thể làm điều đó giống như một mảng thông thường, sử dụng sessionStorage9 và sử dụng thuộc tính sessionStorage0.

Để lặp lại như một mảng sử dụng một cái gì đó như thế này:

Nếu bạn thích sử dụng sessionStorage9 hãy nhớ rằng nó cũng sẽ có được một số thứ được tích hợp trong các thứ mà LocalStorage có, như các phương thức và thuộc tính. Để làm việc xung quanh rằng chúng ta phải thêm một tấm séc để xóa Ins được xây dựng.

Cách dễ dàng hơn là sử dụng sessionStorage0 và nhận tất cả các phím từ đối tượng. Bởi vì sessionStorage0 ở cấp độ đối tượng, nó sẽ không liệt kê các phương thức và thuộc tính từ nguyên mẫu (tôi có một bài viết khác trên phương tiện với lời giải thích về các nguyên mẫu trong JavaScript).

địa phương chỉ giao dịch với các chuỗi

Điều đó là đúng, cả khóa và giá trị luôn luôn là chuỗi. Ngay cả khi bạn cố gắng đặt một giá trị số, như chúng tôi đã làm ở trên, nó sẽ được chuyển thành chuỗi.

Các loại phức tạp hơn có thể được lưu trữ với một cách giải quyết.

Phiên điều hành

sessionStorage có các phương thức và thuộc tính tương tự như localStorage, nhưng nó chỉ lưu trữ dữ liệu trong khi phiên mở. Thông tin sẽ tồn tại giữa các lần làm mới, nhưng không phải nếu bạn đóng trình duyệt. Vì lý do đó sessionStorage được sử dụng ít thường xuyên hơn so với localStorage.

Sự kiện lưu trữ

Bất cứ khi nào một bản cập nhật xảy ra với sessionStorage và localStorage, một sự kiện được kích hoạt trên tất cả các cửa sổ có quyền truy cập vào bộ nhớ, ngoại trừ sự kiện gây ra nó.

Sau đây là các thuộc tính của sự kiện này:

• sessionStorage9 Khóa đã được thay đổi (localStorage0 nếu localStorage1 được gọi).
• localStorage2 Giá trị cũ (localStorage0 nếu khóa mới được thêm vào).
• localStorage4 Giá trị mới (localStorage0 nếu khóa bị xóa).
• localStorage6 URL của tài liệu nơi cập nhật xảy ra.
• localStorage7 đối tượng localStorage hoặc sessionStorage nơi cập nhật xảy ra.

Sự kết luận

Cả hai phương thức lưu trữ dữ liệu trên trình duyệt đều có cách sử dụng. sessionStorage bị hạn chế hơn, chỉ lưu trữ dữ liệu cho cửa sổ hiện tại. localStorage có nhiều công dụng hơn, bởi vì dữ liệu được giữ ngay cả khi trình duyệt đóng.

Nếu bạn thích bài viết này, xin vui lòng chia sẻ với bạn bè của bạn và xem xét theo dõi tôi trên Medium.

Xây dựng mặt trận và phụ trợ có thể kết hợp

Don lồng xây dựng các nguyên khối web. Sử dụng bit để tạo và soạn các thành phần phần mềm tách rời - trong các khung yêu thích của bạn như React hoặc Node. Xây dựng các ứng dụng có thể mở rộng và mô -đun với trải nghiệm dev mạnh mẽ và thú vị.

Đưa nhóm của bạn đến Bit Cloud để lưu trữ và hợp tác với các thành phần cùng nhau, và tăng tốc đáng kể, quy mô và tiêu chuẩn hóa phát triển như một nhóm. Bắt đầu với các mặt tiền có thể kết hợp như một hệ thống thiết kế hoặc mặt tiền vi mô, hoặc khám phá phần phụ trợ có thể kết hợp. Hãy thử nó →Give it a try →

Tìm hiểu thêm

Làm thế nào JavaScript có thể lưu trữ dữ liệu cục bộ?

Làm thế nào để JavaScript lưu trữ dữ liệu trong bộ đệm trình duyệt?

Các loại lưu trữ khác nhau trong JavaScript là gì?

Làm thế nào để một trình duyệt lưu trữ dữ liệu?