Chúng ta có thể lưu trữ đối tượng trong JavaScript đối tượng không?

Không giống như cookie, bộ nhớ cục bộ chỉ có thể được đọc phía máy khách — nghĩa là bởi trình duyệt và JavaScript của bạn. Nếu bạn muốn chia sẻ một số dữ liệu với máy chủ, cookie có thể là một lựa chọn tốt hơn

Để lưu một số dữ liệu, hãy sử dụng localStorage.setItem

localStorage.setItem('name', 'tom');

Đối số đầu tiên là mã định danh mà sau này bạn sẽ sử dụng để lấy lại dữ liệu. Thứ hai là dữ liệu bạn muốn lưu trữ

Quay trở lại thật đơn giản — chỉ cần chuyển số nhận dạng cho localStorage.getItem

var name = localStorage.getItem('name');

Bộ nhớ cục bộ chỉ có thể lưu các chuỗi, do đó, việc lưu trữ các đối tượng yêu cầu chúng phải được chuyển thành chuỗi bằng cách sử dụng JSON.stringify - bạn không thể yêu cầu bộ nhớ cục bộ lưu trữ trực tiếp một đối tượng vì nó sẽ lưu trữ “[Đối tượng đối tượng]”, điều này không đúng lúc

Điều đó cũng có nghĩa là đối tượng phải được chạy qua JSON.parse trên đường ra khỏi bộ nhớ cục bộ. Bạn có thể thấy điều này trong ví dụ dưới đây

// Object example

localStorage.setItem('user', JSON.stringify({
    username: 'htmldog',
    api_key: 'abc123xyz789'
}));

var user = JSON.parse(localStorage.getItem('user'));

Hỗ trợ trình duyệt cho bộ nhớ cục bộ không phải là 100% nhưng nó khá tốt - bạn có thể mong đợi nó hoạt động trong tất cả các trình duyệt hiện đại, IE 8 trở lên và trong hầu hết các trình duyệt di động.

Đây là cách lưu trữ một đối tượng JavaScript trong localStorage bên trong trình duyệt web của người dùng. Bộ nhớ cục bộ còn được gọi là HTML5 localStorage, window.localStorage hoặc bộ đệm của trình duyệt

Khi chúng tôi gọi window.localStorage bằng JavaScript, chúng tôi có thể lưu trữ dữ liệu vẫn tồn tại trên trình duyệt của khách hàng và có thể truy cập được từ mã phía máy khách đang chạy trong trình duyệt đó

Điều đó có nghĩa là khi người dùng rời khỏi trang web và quay lại sau, mã JavaScript của bạn có thể đọc từ window.localStorage

“Thuộc tính chỉ đọc localStorage cho phép bạn truy cập một đối tượng Storage cho nguồn gốc của Document; . ” — Tài liệu MDN

Người dùng thích có thể tiếp tục từ nơi họ đã dừng lại, hơn thế nữa mà không cần tài khoản hoặc thông tin đăng nhập dưới bất kỳ hình thức nào

Dữ liệu trong_______7_______ vẫn tồn tại giữa các phiên của trình duyệt, ngay cả khi trình duyệt đã đóng, trừ khi người dùng xóa bộ đệm

“localStorage tương tự như localStorage1, ngoại trừ trong khi dữ liệu được lưu trữ trong localStorage không có thời gian hết hạn, thì dữ liệu được lưu trữ trong localStorage3 sẽ bị xóa khi phiên trang kết thúc — nghĩa là khi trang được đóng lại. ” — Tài liệu MDN

Trong các cửa sổ riêng tư, dữ liệu localStorage sẽ bị xóa khi đóng tab riêng tư cuối cùng, kết thúc phiên duyệt web riêng tư

“Các khóa và giá trị [trong localStorage] luôn ở định dạng UTF-16 localStorage6, sử dụng hai byte cho mỗi ký tự. Đối với các đối tượng, các khóa số nguyên được tự động chuyển đổi thành chuỗi. ” — Tài liệu MDN

Nếu bạn đã quen làm việc với JSON (Ký hiệu đối tượng JavaScript) và các phương thức trợ giúp của nó là localStorage7 và localStorage8, thì bạn sẽ biết cách lưu trữ một đối tượng trong localStorage. dưới dạng chuỗi JSON

Cách lưu trữ các đối tượng JavaScript trong localStorage

Để lưu trữ các đối tượng JavaScript trong localStorage, bạn cần xâu chuỗi và phân tích các đối tượng thành định dạng JSON

Khi tôi đã chuyển đổi đối tượng window.localStorage2 thành một chuỗi JSON với stringify, tôi thêm nó vào localStorage bằng cách sử dụng window.localStorage4. Trong ví dụ, tôi sử dụng khóa chuỗi là window.localStorage5 để lưu trữ đối tượng

Để nhớ lại sau này từ localStorage, tôi truy xuất chuỗi JSON được lưu trữ cho window.localStorage5 bằng cách sử dụng window.localStorage8, sau đó tôi phân tích cú pháp chuỗi đó

Để xóa một đối tượng JavaScript khỏi localStorage, bạn sử dụng cùng một chuỗi khóa (window.localStorage5) để gọi localStorage1

Bạn cũng có thể xóa hoàn toàn localStorage với localStorage3, thao tác này sẽ xóa tất cả các mục

Nếu bạn tự mình thử mã này, hãy đảm bảo rằng bạn đang thực hiện mã đó trên trang web có tên miền (chứ không phải trong tab mới của cửa sổ trình duyệt)

Bạn cũng có thể kiểm tra localStorage trực tiếp bên trong trình duyệt bằng cách sử dụng Công cụ dành cho nhà phát triển của Chrome hoặc công cụ Trình kiểm tra lưu trữ của Firefox

Những đối tượng nào là JSON an toàn trong JavaScript?

Điều quan trọng là phải nhận ra rằng có những loại dữ liệu không thể được lưu trữ trong localStorage dưới dạng chuỗi JSON

Hầu hết các loại nguyên thủy là

• booleans
• con số
• dây

Nhưng sau đây không phải là giá trị JSON hợp lệ

• localStorage6
• chức năng
• biểu tượng
• localStorage7 đối tượng
• localStorage8 và localStorage9 trở thành window.localStorage0

Cuối cùng, các loại đối tượng bao gồm window.localStorage1 và window.localStorage2 sẽ chỉ có các thuộc tính có thể đếm được của chúng được tuần tự hóa thành định dạng JSON

Thuộc tính có thể đếm được là những thuộc tính được gán trực tiếp cho đối tượng theo cách điển hình, vì vậy, window.localStorage3 và window.localStorage4 của bạn sẽ trống (window.localStorage5) ở định dạng JSON trừ khi bạn chuyển đổi chúng thành đối tượng hoặc mảng điển hình trước

Mảng hoạt động tốt và chúng sẽ được biểu thị bằng JSON bằng cách sử dụng dấu ngoặc vuông window.localStorage6 so với dấu ngoặc nhọn cho đối tượng window.localStorage5

Các đối tượng JSON bao gồm các mảng có thể được lồng vào nhau mà không gặp vấn đề gì, miễn là các quy tắc khác được tuân theo

Cookie có giống như window.localStorage8 không?

Mặc dù cả cookie và window.localStorage8 đều phục vụ mục đích tương tự, duy trì dữ liệu giữa các phiên của người dùng, nhưng có một số điểm khác biệt chính

“Cookie và bộ nhớ cục bộ phục vụ các mục đích khác nhau. Cookie chủ yếu để đọc phía máy chủ, trong khi bộ nhớ cục bộ chỉ có thể được đọc bởi phía máy khách. ” — Anum Siddiqui trên blog Trung bình của anh ấy

Sự khác biệt chính khác giữa hai là kích thước. localStorage cung cấp tối đa 5 MB cho mỗi miền (còn được gọi là “origin”) và nó được lưu trữ như một phần của bộ nhớ cache của trình duyệt nếu người dùng xóa lịch sử duyệt web

Để so sánh, cookie thường có kích thước 4KB — không đủ chỗ để lưu trữ nhiều dữ liệu, bên ngoài thứ gì đó như mã thông báo xác thực người dùng

Điều đó có nghĩa là mặc dù chúng tôi có thể lưu trữ đối tượng JavaScript trong localStorage, nhưng chúng tôi không có khả năng lưu trữ đối tượng JavaScript trong cookie

Tuy nhiên, đó là một sự khác biệt khá kỹ thuật, vì vậy bạn có thể nghe thấy các nhà phát triển gọi localStorage là cookie, theo nghĩa “dữ liệu lâu dài dành riêng cho người dùng đó mà chúng tôi có thể truy cập bằng JavaScript. ”

Tóm lại, chúng tôi có thể lưu trữ các đối tượng JavaScript trong localStorage bằng HTML5, miễn là các đối tượng của chúng tôi an toàn với JSON

Mã hóa vui vẻ. 🍕🍕🍕🍕🍕

Tiến sĩ. Derek Austin là tác giả của Lập trình nghề nghiệp. Làm thế nào bạn có thể trở thành một lập trình viên có thân hình 6 con số thành công trong 6 tháng, hiện đã có trên Amazon

Làm cách nào để lưu trữ một đối tượng trong một đối tượng khác trong JavaScript?

Các đối tượng có thể được lưu trữ trong JavaScript không?

Làm cách nào để lưu trữ giá trị trong đối tượng trong JavaScript?

Làm cách nào để lấy dữ liệu từ đối tượng đối tượng trong JavaScript?