Hướng dẫn can you store an object in an object javascript? - bạn có thể lưu trữ một đối tượng trong một đối tượng javascript không?

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));

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));

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ượng sessionStorage 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ặc sessionStorage, 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: localStorage2, localStorage3, localStorage4, localStorage5 và localStorage6.

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 localStorage2 và localStorage3, cũng như hai phương thức JSON, localStorage0 và localStorage1.

• localStorage2 - Phương thức localStorage2 đượ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ị, localStorage4
• localStorage5 - Phương thức localStorage3 trả về giá trị của tên khóa mà Lừa đã truyền cho nó, chẳng hạn như localStorage7
• localStorage8 - Phương thức localStorage8 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 JSON
• sessionStorage0 - Phương thức sessionStorage0 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 sessionStorage3 để 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 sessionStorage5, như trong hình ảnh.

sessionStorage6 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 localStorage3 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 sessionStorage9 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 localStorage8, sau đó quay lại các đối tượng bằng phương thức sessionStorage0.

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í.