Khi xây dựng các ứng dụng JavaScript phức tạp hơn chạy trong trình duyệt của người dùng, sẽ rất hữu ích nếu có thể lưu trữ thông tin trong trình duyệt để thông tin có thể được chia sẻ trên các trang và phiên duyệt web khác nhau
Trước đây, điều này chỉ có thể thực hiện được với cookie - tệp văn bản được lưu vào máy tính của người dùng - nhưng cách quản lý chúng bằng JavaScript không tốt. Giờ đây, có một công nghệ mới gọi là bộ nhớ cục bộ thực hiện công việc tương tự nhưng với giao diện dễ sử dụng hơn
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ữ
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ượngStorage
cho nguồn gốc củaDocument
; . ” — 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ưlocalStorage
1, ngoại trừ trong khi dữ liệu được lưu trữ tronglocalStorage
không có thời gian hết hạn, thì dữ liệu được lưu trữ tronglocalStorage
3 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-16localStorage
6, 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à localStorage
7 và localStorage
8, 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
Xem mã thô dưới dạng GitHub Gist
Khi tôi đã chuyển đổi đối tượng window.localStorage
2 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.localStorage
4. Trong ví dụ, tôi sử dụng khóa chuỗi là window.localStorage
5 để 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.localStorage
5 bằng cách sử dụng window.localStorage
8, 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.localStorage
5] để gọi localStorage
1
Bạn cũng có thể xóa hoàn toàn localStorage
với localStorage
3, 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ệ
localStorage
6- chức năng
- biểu tượng
localStorage
7 đối tượnglocalStorage
8 vàlocalStorage
9 trở thànhwindow.localStorage
0
Cuối cùng, các loại đối tượng bao gồm window.localStorage
1 và window.localStorage
2 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.localStorage
3 và window.localStorage
4 của bạn sẽ trống [window.localStorage
5] ở đị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.localStorage
6 so với dấu ngoặc nhọn cho đối tượng window.localStorage
5
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.localStorage
8 không?
Mặc dù cả cookie và window.localStorage
8 đề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