Lưu trữ các đối tượng JavaScript trong HTML5 localStorage và sessionStorage

Làm việc với các đối tượng trong Web Storage

Khi làm việc với HTML5 localStorage hoặc sessionStorage, các nhà phát triển thường gặp phải sự cố khi cố gắng lưu trữ các đối tượng JavaScript. Không giống như các kiểu và mảng dữ liệu nguyên thủy, các đối tượng dường như được chuyển đổi thành chuỗi, điều này có thể dẫn đến nhầm lẫn và kết quả không mong muốn.

Hiểu cách lưu trữ và truy xuất đúng cách các đối tượng bằng cách sử dụng Web Storage là rất quan trọng đối với nhiều ứng dụng web. Hướng dẫn này sẽ khám phá lý do tại sao đối tượng được chuyển đổi thành chuỗi và cung cấp giải pháp đơn giản để đảm bảo đối tượng của bạn được lưu trữ và truy xuất chính xác.

Yêu cầu	Sự miêu tả
JSON.stringify()	Chuyển đổi một đối tượng hoặc giá trị JavaScript thành chuỗi JSON, cho phép lưu trữ trong localStorage hoặc sessionStorage.
localStorage.setItem()	Lưu trữ một cặp khóa-giá trị trong đối tượng localStorage, cho phép dữ liệu tồn tại trong các phiên trình duyệt.
localStorage.getItem()	Truy xuất giá trị được liên kết với một khóa nhất định từ localStorage.
JSON.parse()	Phân tích chuỗi JSON và chuyển đổi chuỗi đó thành đối tượng JavaScript, cho phép truy xuất các cấu trúc dữ liệu phức tạp.
sessionStorage.setItem()	Lưu trữ một cặp khóa-giá trị trong đối tượng sessionStorage, cho phép dữ liệu tồn tại trong suốt thời gian của phiên trang.
sessionStorage.getItem()	Truy xuất giá trị được liên kết với một khóa nhất định từ sessionStorage.

Lưu trữ và truy xuất hiệu quả các đối tượng trong bộ nhớ web

Trong JavaScript, Và là các đối tượng lưu trữ web cho phép bạn lưu các cặp khóa-giá trị trong trình duyệt. Tuy nhiên, các giải pháp lưu trữ này chỉ hỗ trợ chuỗi, điều đó có nghĩa là việc cố gắng lưu trữ trực tiếp một đối tượng JavaScript sẽ dẫn đến việc đối tượng được chuyển đổi thành biểu diễn chuỗi như . Để lưu trữ các đối tượng một cách hiệu quả, bạn cần chuyển đổi chúng thành chuỗi JSON bằng cách sử dụng JSON.stringify(). Phương thức này lấy một đối tượng JavaScript và trả về một chuỗi JSON, chuỗi này có thể được lưu trữ trong hoặc .

Để truy xuất đối tượng được lưu trữ, bạn phải chuyển đổi chuỗi JSON thành đối tượng JavaScript bằng cách sử dụng . Phương thức này lấy một chuỗi JSON và trả về đối tượng JavaScript tương ứng. Các tập lệnh được cung cấp trong các ví dụ trên minh họa quá trình này. Đầu tiên, một đối tượng được tạo và chuyển đổi thành chuỗi JSON với trước khi được lưu trữ trong sử dụng localStorage.setItem(). Để truy xuất đối tượng, chuỗi JSON được tìm nạp từ sử dụng và sau đó phân tích cú pháp lại thành một đối tượng JavaScript bằng cách sử dụng .

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in localStorage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from localStorage and convert it back to an object
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in sessionStorage
sessionStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from sessionStorage and convert it back to an object
var retrievedObject = JSON.parse(sessionStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

Kỹ thuật nâng cao để lưu trữ web

Khi sử dụng HTML5 Và , các nhà phát triển thường cần lưu trữ nhiều dữ liệu phức tạp hơn là chỉ các chuỗi. Mặc dù việc tuần tự hóa và giải tuần tự hóa JSON có hiệu quả đối với các đối tượng cơ bản, nhưng các kịch bản nâng cao hơn có thể cần phải cân nhắc thêm. Ví dụ: nếu bạn đang làm việc với các đối tượng được lồng sâu hoặc các đối tượng chứa các phương thức, bạn cần một cách tiếp cận phức tạp hơn. Một kỹ thuật phổ biến là sử dụng một thư viện như hoặc circular-json để xử lý các tham chiếu vòng tròn và các cấu trúc đối tượng phức tạp hơn.

Các thư viện này mở rộng tiêu chuẩn Và các phương pháp hỗ trợ tuần tự hóa và giải tuần tự hóa các đối tượng có tham chiếu vòng tròn, tạo ra giải pháp mạnh mẽ hơn để lưu trữ các đối tượng trong bộ nhớ web. Một cân nhắc khác là nén dữ liệu. Đối với các đối tượng lớn, bạn có thể sử dụng các thư viện như nén dữ liệu trước khi lưu vào localStorage hoặc , giảm lượng không gian sử dụng. Điều này có thể đặc biệt hữu ích cho các ứng dụng cần lưu trữ một lượng lớn dữ liệu phía máy khách.

1. Tôi có thể lưu trữ các chức năng trong hoặc ?
2. Không, các chức năng không thể được lưu trữ trực tiếp trong bộ nhớ web. Bạn có thể lưu mã hàm dưới dạng chuỗi và sử dụng để tạo lại nó, nhưng điều này thường không được khuyến khích do rủi ro bảo mật.
3. Làm cách nào để xử lý các tham chiếu vòng tròn trong đối tượng?
4. Sử dụng các thư viện như hoặc được thiết kế để xử lý các tham chiếu vòng tròn trong các đối tượng JavaScript.
5. Giới hạn lưu trữ cho là gì ?
6. Giới hạn lưu trữ cho thường khoảng 5 MB nhưng nó có thể khác nhau giữa các trình duyệt.
7. Tôi có thể nén dữ liệu trước khi lưu trữ không?
8. Có, bạn có thể sử dụng các thư viện như để nén dữ liệu của bạn trước khi lưu trữ nó vào hoặc .
9. Làm cách nào để lưu trữ một mảng đối tượng?
10. Chuyển đổi mảng thành chuỗi JSON bằng cách sử dụng trước khi lưu trữ nó trong hoặc .
11. Có an toàn để lưu trữ dữ liệu nhạy cảm trong ?
12. Không, việc lưu trữ dữ liệu nhạy cảm trong vì nó có thể truy cập được thông qua JavaScript và có thể bị xâm phạm nếu trang web bị tấn công.
13. Tôi có thể sử dụng không? trên các miền khác nhau?
14. KHÔNG, bị giới hạn ở cùng một nguồn gốc, nghĩa là nó không thể được truy cập trên các miền khác nhau.
15. Điều gì xảy ra nếu người dùng xóa dữ liệu trình duyệt của họ?
16. Tất cả dữ liệu được lưu trữ trong Và sẽ bị xóa nếu người dùng xóa dữ liệu trình duyệt của họ.

Việc lưu trữ và truy xuất các đối tượng trong kho lưu trữ web HTML5 một cách hiệu quả yêu cầu chuyển đổi các đối tượng thành chuỗi JSON bằng và sau đó phân tích chúng lại với . Phương pháp này đảm bảo rằng dữ liệu vẫn còn nguyên vẹn và có thể sử dụng được trên các phiên trình duyệt khác nhau. Bằng cách hiểu và sử dụng các kỹ thuật này, nhà phát triển có thể tận dụng localStorage và sessionStorage cho các tác vụ quản lý dữ liệu phức tạp hơn, nâng cao chức năng và hiệu suất của các ứng dụng web của họ.