Cách lưu trữ dữ liệu với LocalStorage và SessionStorage. Lợi ích của từng
Ảnh của Raymond Rasmusson trên undplashlocalStorage
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 sessionStorage
1 trên một cửa sổ và đọc nó với sessionStorage
2 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ị sessionStorage
3 vào khóa sessionStorage
4, 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 sessionStorage
7 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 sessionStorage
9 và sử dụng thuộc tính sessionStorage
0.
Để 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 sessionStorage
9 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 sessionStorage
0 và nhận tất cả các phím từ đối tượng. Bởi vì sessionStorage
0 ở 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:
sessionStorage
9 Khóa đã được thay đổi [localStorage
0 nếulocalStorage
1 được gọi].localStorage
2 Giá trị cũ [localStorage
0 nếu khóa mới được thêm vào].localStorage
4 Giá trị mới [localStorage
0 nếu khóa bị xóa].localStorage
6 URL của tài liệu nơi cập nhật xảy ra.localStorage
7 đối tượnglocalStorage
hoặcsessionStorage
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 →