API lưu trữ web cung cấp các cơ chế cho trình duyệt của máy khách để lưu trữ an toàn và dễ dàng truy cập các cặp giá trị khóa. Điều này rất hữu ích để lưu trữ dữ liệu đơn giản như tên người dùng hoặc email, cũng như kiểm tra xem người dùng có thể truy cập một tài nguyên cụ thể hay không bằng cách lưu trữ dữ liệu như truy cập và làm mới mã thông báo.
Chúng tôi có thể dễ dàng xem dữ liệu được lưu trữ trên trình duyệt của máy khách bằng cách sử dụng mã phía máy khách JavaScript chạy trong trình duyệt đó, vì vậy nếu người dùng rời khỏi trang web và sau đó trả về, mã JS của bạn có thể đọc từ window.localStorage
để truy xuất bất kỳ dữ liệu nào được lưu trong đó.
Trong bài viết này, chúng tôi sẽ xem xét cách xâu chuỗi và phân tích các đối tượng JavaScript thành các chuỗi JSON để chúng có thể được lưu trong localStorage
. Chúng tôi cũng sẽ học được sự khác biệt giữa localStorage
, sessionStorage
và cookie, cũng như các lợi ích và nhược điểm của việc sử dụng cookie thay vì localStorage
.
localStorage
là gì?
________ 8 & nbsp; là một cơ chế lưu trữ web cho phép chúng tôi lưu trữ dữ liệu trên trình duyệt của máy khách vẫn tồn tại ngay cả sau khi cửa sổ trình duyệt được đóng. Dữ liệu được lưu trữ ở đây có thể được truy cập trong một miền cụ thể. Chẳng hạn, dữ liệu được lưu trữ trong đối tượng localStorage
từ
//javascript let newObject = window.localStorage.getItem["myObject"]; console.log[JSON.parse[newObject]];0 có thể được truy cập bởi bất kỳ trang nào trên tên miền này.
Và, theo W3Schools, đối tượng localStorage
lưu trữ dữ liệu mà không có ngày hết hạn. Dữ liệu sẽ không bị xóa khi trình duyệt được đóng và sẽ có sẵn vào ngày hôm sau, tuần hoặc năm.
Sử dụng sessionStorage
so với localStorage
so với cookie
sessionStorage
là API lưu trữ web được sử dụng trên phía máy khách để lưu trữ dữ liệu cho một tên miền cụ thể. Nó tương tự như window.localStorage
, nhưng nó có thời gian hết hạn.
//javascript let newObject = window.localStorage.getItem["myObject"]; console.log[JSON.parse[newObject]];6 hoạt động miễn là tab hoặc trình duyệt mở và tồn tại thông qua các trang tải lại và khôi phục. Khi một tài liệu được tải vào tab Trình duyệt, một phiên trang mới được tạo và gán cho tab đó. Phiên trang đó chỉ hợp lệ cho tab trong câu hỏi.
Lưu ý: Dữ liệu được lưu trữ trong
sessionStorage
là khác biệt với giao thức trang đó. Điều này có nghĩa là dữ liệu được lưu trữ trên một trang web được truy cập qua HTTP được lưu trữ trên một đối tượngsessionStorage
khác với dữ liệu được lưu trữ trên cùng một trang web được truy cập qua HTTPS.
localStorage
hoạt động tương tự như sessionStorage
, nhưng sự khác biệt là dữ liệu được lưu trữ trong localStorage
là tồn tại và tồn tại mãi mãi đối với miền cụ thể đó trừ khi bộ đệm của trình duyệt được xóa hoặc chúng tôi xóa localStorage
bằng cách sử dụng JavaScript vì dữ liệu localStorage
chỉ có thể được thao tác bởi JavaScript.
Lưu ý: Khi tab riêng cuối cùng được đóng, dữ liệu được lưu trữ trong đối tượng
localStorage
của một trang web được mở trong một tab riêng hoặc chế độ ẩn danh sẽ bị xóa.
Mặt khác, cookie HTTP là các tệp văn bản mà máy chủ của trang web tạo và gửi cho người dùng mới truy cập trang web. Khi bạn kết nối, máy chủ sẽ tạo thông tin được lưu trong cookie. Thông tin này được dán nhãn với một ID duy nhất cho bạn và máy tính của bạn.
Cookie chứa thông tin cụ thể cho một người dùng cụ thể và được sử dụng để xác định người dùng đó. Họ lưu dữ liệu như thông tin xác thực, thông tin giỏ hàng, v.v. để giúp cá nhân hóa trải nghiệm của người dùng. Tuy nhiên, chúng có thể là một cơn ác mộng riêng tư, như chúng ta sẽ thấy trong phần sau.
Sử dụng cookie để lưu trữ web
Trong phần này, chúng tôi sẽ xem xét một số ưu và nhược điểm khi làm việc với cookie trên localStorage
.
Tại sao sử dụng cookie?
- Cookie phù hợp hơn để thực hiện các nhiệm vụ liên quan đến xác thực. Chúng được gửi đến máy chủ trong các tiêu đề HTTP từ trình duyệt, trái ngược với việc sử dụng
localStorage
hoặcsessionStorage
, chỉ được truy cập bởi ứng dụng làm lưu trữ dữ liệu phía máy khách - Cookies chỉ có thể được đánh dấu là HTTP, giới hạn các cuộc tấn công XSS [kịch bản chéo trang] đối với trình duyệt của người dùng trong phiên, nhưng điều này không đảm bảo khả năng miễn dịch hoàn toàn đối với các cuộc tấn công XSS
Nhược điểm của việc sử dụng cookie
- Cookie dễ bị tấn công mạng và cookie bị cướp có thể cho phép truy cập vào các phiên duyệt của người dùng.
- Cookie của bên thứ ba là một cơn ác mộng riêng tư. Chúng được tạo bởi một trang web khác với trang web hiện tại mà bạn đang xem. Chúng thường được liên kết với quảng cáo trên trang web, vì vậy việc truy cập một trang web có bảy quảng cáo có thể tạo bảy cookie, ngay cả khi người dùng không nhấp vào quảng cáo
- Với
localStorage
, các ứng dụng web có thể lưu trữ toàn bộ tài liệu do người dùng làm việc ở phía máy khách vì lý do hiệu suất, nhưng cookie không xử lý tốt việc này, vì chúng được truyền đi với mọi yêu cầu được thực hiện cho máy chủ - Khả năng lưu trữ cho cookie chỉ khoảng 4kbm so với công suất
localStorage
là 10MB - Bởi vì cookie được lưu trữ dưới dạng tệp văn bản trên ổ cứng, chúng gây ra rủi ro bảo mật nghiêm trọng. Bất kỳ kẻ xâm nhập nào cũng có thể dễ dàng mở các tệp này và xem thông tin có trong
Cách lưu trữ đối tượng JavaScript trong localStorage
Khi làm việc với đối tượng window.localStorage
, bạn nên làm quen với các phương pháp sau: localStorage
2, localStorage
3, localStorage
4, localStorage
5 và localStorage
6.
Chúng ta hãy nhìn vào cách lưu trữ các đối tượng JavaScript trong đối tượng localStorage
bằng các phương thức localStorage
2 và localStorage
3, cũng như hai phương thức JSON, localStorage
0 và localStorage
1.
localStorage
2 - Phương thứclocalStorage
2 được sử dụng để thêm dữ liệu vào đối tượng lưu trữ web. Nó có hai đối số, một cặp khóa và giá trị,localStorage
4localStorage
5 - Phương thứclocalStorage
3 trả về giá trị của tên khóa mà Lừa đã truyền cho nó, chẳng hạn nhưlocalStorage
7localStorage
8 - Phương thứclocalStorage
8 chuyển đổi bất kỳ đối tượng hoặc giá trị chấp nhận nào thành một chuỗi JSONsessionStorage
0 - Phương thứcsessionStorage
0 chuyển đổi một chuỗi thành đối tượng hoặc giá trị tương ứng của nó như được mô tả bởi chuỗi
Hãy cùng xem một ví dụ về cách lưu trữ một đối tượng JavaScript trong localStorage
bằng các phương thức được đề cập ở trên:
//javascript const myObject = { name : "john doe", age : 32, gender : "male", profession : "optician" } window.localStorage.setItem["myObject", JSON.stringify[myObject]];
Trong khối mã, chúng tôi đã sử dụng phương thức sessionStorage
3 để chuyển đổi đối tượng JavaScript của chúng tôi thành một chuỗi trước vì chúng tôi chỉ có thể lưu trữ các chuỗi trong đối tượng window.localStorage
.
Nếu chúng tôi cố gắng lưu trữ một đối tượng JavaScript mà không chuyển đổi nó thành một chuỗi, chúng tôi sẽ nhận được phản hồi sessionStorage
5, như trong hình ảnh.
sessionStorage
6 là một biểu diễn chuỗi của một thể hiện đối tượng, nhưng giá trị của nó không bao giờ được đọc.
Bây giờ chúng ta cần truy xuất đối tượng JavaScript của chúng ta, mà trước đây chúng ta đã lưu dưới dạng chuỗi JSON. Để làm điều này, chúng ta cần phân tích chuỗi.
//javascript let newObject = window.localStorage.getItem["myObject"]; console.log[JSON.parse[newObject]];
Ở đây, chúng tôi đã truy xuất đối tượng JavaScript đã đặt trước đó bằng cách sử dụng phương thức localStorage
3 trên đối tượng window.localStorage
và lưu nó vào một biến. Tiếp theo, chúng tôi đã phân tích chuỗi đó vào một đối tượng JavaScript và sau đó đăng nhập nó vào bảng điều khiển.
Nếu chúng ta cố gắng truy xuất đối tượng mà không cần phân tích cú pháp trước, chúng ta sẽ lấy lại một chuỗi như một phản hồi. Ở đây, ý tôi là:
Các loại dữ liệu có thể được lưu trữ dưới dạng chuỗi JSON
Một số loại dữ liệu không an toàn cho JSON và nếu các giá trị đó được tìm thấy trong quá trình chuyển đổi, chúng được loại trừ trong một đối tượng hoặc thay đổi thành sessionStorage
9 trong một mảng.
Các loại dữ liệu nguyên thủy như số, booleans và chuỗi an toàn với JSON, trong khi các giá trị như hàm, không xác định, ký hiệu, đối tượng ngày không an toàn cho JSON.
Nhiều bài viết tuyệt vời hơn từ Logrocket:
- Đừng bỏ lỡ một khoảnh khắc với bản phát lại, một bản tin được quản lý từ Logrocket
- Tìm hiểu cách Galileo của Logrocket cắt giảm tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
- Sử dụng React's UsEffect để tối ưu hóa hiệu suất của ứng dụng của bạn
- Chuyển đổi giữa nhiều phiên bản của nút
- Khám phá cách làm động ứng dụng ứng dụng React của bạn với Animxyz
- Khám phá Tauri, một khuôn khổ mới để xây dựng các nhị phân
- So sánh NestJS so với Express.js
Sự kết luận
Trong bài viết này, chúng tôi đã tìm hiểu về một mẹo gọn gàng để lưu trữ các đối tượng JavaScript dưới dạng các chuỗi JSON trong đối tượng window.localStorage
. Chúng tôi có thể lưu trữ thêm thông tin người dùng theo một khóa theo cách này.
Tóm lại, chúng ta có thể lưu trữ các đối tượng JavaScript trong localStorage
bằng cách trước tiên chuyển đổi chúng thành các chuỗi bằng phương thức localStorage
8, sau đó quay lại các đối tượng bằng phương thức sessionStorage
0.
Logrocket: Debug Lỗi JavaScript dễ dàng hơn bằng cách hiểu bối cảnh
Mã gỡ lỗi luôn là một nhiệm vụ tẻ nhạt. Nhưng bạn càng hiểu lỗi của mình thì càng dễ dàng sửa chúng.
Logrocket cho phép bạn hiểu các lỗi này theo những cách mới và độc đáo. Giải pháp giám sát frontend của chúng tôi theo dõi sự tham gia của người dùng với các mặt tiền JavaScript của bạn để cung cấp cho bạn khả năng tìm hiểu chính xác những gì người dùng đã làm dẫn đến lỗi.
Logrocket Records nhật ký bảng điều khiển, thời gian tải trang, ngăn xếp, yêu cầu/phản hồi mạng chậm với các tiêu đề + thân, siêu dữ liệu trình duyệt và nhật ký tùy chỉnh. Hiểu được tác động của mã JavaScript của bạn sẽ không bao giờ dễ dàng hơn!
Hãy thử nó miễn phí.