LocalStorage.getItem ('item') có tốt hơn localStorage.item hoặc localStorage ['item'] không?

Gần đây tôi đã đặt một câu hỏi về LocalStorage . Đang sử dụng JSON.parse(localStorage.item)và JSON.parse(localStorage['item'])không hoạt động để trả lại NULLkhi mục chưa được đặt.

Tuy nhiên, JSON.parse(localStorage.getItem('item')đã làm việc. Và hóa ra, JSON.parse(localStorage.testObject || null)cũng hoạt động.

Một trong những nhận xét về cơ bản nói rằng localStorage.getItem()và localStorage.setItem()nên luôn được ưu tiên:

Getter và setter cung cấp một cách tương thích nhất quán, tiêu chuẩn hóa và trình duyệt chéo để làm việc với api LS và nên luôn được ưu tiên hơn các cách khác. - Christoph

Tôi dần thích sử dụng ký hiệu dấu chấm và dấu ngoặc đơn cho localStorage, nhưng tôi tò mò muốn biết những người khác đảm nhận điều này. LocalStorage.getItem ('item') có tốt hơn localStorage.item hoặc localStorage ['item'] HOẶC miễn là chúng hoạt động được các ký hiệu viết tắt là được?

Cả truy cập thuộc tính trực tiếp ( localStorage.itemhoặc localStorage['item']) và sử dụng giao diện chức năng ( localStorage.getItem('item')) đều hoạt động tốt. Cả hai đều là tiêu chuẩn và tương thích với nhiều trình duyệt. ^* Theo thông số kỹ thuật :

Các tên thuộc tính được hỗ trợ trên đối tượng Lưu trữ là các khóa của mỗi cặp khóa / giá trị hiện có trong danh sách được liên kết với đối tượng, theo thứ tự các khóa được thêm lần cuối vào vùng lưu trữ.

Chúng chỉ hoạt động khác nhau khi không tìm thấy cặp khóa / giá trị nào với tên được yêu cầu. Ví dụ, nếu chìa khóa 'item'không tồn tại, var a = localStorage.item;sẽ cho kết quả alà undefined, trong khi var a = localStorage.getItem('item');sẽ dẫn đến acó giá trị null. Như bạn đã phát hiện, undefinedvà nullkhông thể hoán đổi cho nhau trong JavaScript / EcmaScript. :)

CHỈNH SỬA: Như Christoph đã chỉ ra trong câu trả lời của mình , giao diện chức năng là cách duy nhất để lưu trữ và truy xuất các giá trị trong các khóa bằng các thuộc tính được xác định trước một cách đáng tin cậy localStorage. (Có sáu trong số này: length, key, setItem, getItem, removeItem, và clear.) Vì vậy, ví dụ, sau đây sẽ luôn luôn làm việc:

localStorage.setItem('length', 2);
console.log(localStorage.getItem('length'));

Đặc biệt lưu ý rằng câu lệnh đầu tiên sẽ không ảnh hưởng đến thuộc tính localStorage.length(ngoại trừ có thể tăng nó lên nếu chưa có khóa nào 'length'trong đó localStorage). Về mặt này, thông số kỹ thuật dường như không nhất quán.

Tuy nhiên, những điều sau có thể sẽ không làm được những gì bạn muốn:

localStorage.length = 2;
console.log(localStorage.length);

Điều thú vị là đầu tiên là không chọn trong Chrome, nhưng đồng nghĩa với lệnh gọi chức năng trong Firefox. Thứ hai sẽ luôn ghi lại số lượng khóa có trong localStorage.

^* _{Điều này đúng với các trình duyệt hỗ trợ lưu trữ web ngay từ đầu. (Điều này bao gồm hầu hết tất cả các trình duyệt dành cho máy tính để bàn và thiết bị di động hiện đại.) Đối với các môi trường mô phỏng lưu trữ cục bộ bằng cookie hoặc các kỹ thuật khác, hành vi phụ thuộc vào miếng đệm được sử dụng. Một số polyfills cho localStoragecó thể được tìm thấy ở đây .}

Câu hỏi đã khá cũ, nhưng vì tôi đã được trích dẫn trong câu hỏi, tôi nghĩ tôi nên nói hai từ về tuyên bố của mình.

Đối tượng Lưu trữ khá đặc biệt, nó là một đối tượng, cung cấp quyền truy cập vào danh sách các cặp khóa / giá trị. Vì vậy, nó không phải là một đối tượng hoặc mảng thông thường.

Ví dụ: nó có thuộc tính length, không giống như thuộc tính độ dài mảng là chỉ đọc và trả về số lượng khóa trong bộ nhớ.

Với một mảng bạn có thể làm:

var a = [1,2,3,4];
a.length // => 4
a.length = 2;
a // => [1,2]

Ở đây chúng tôi có lý do đầu tiên để sử dụng getters / setters. Nếu bạn muốn đặt một mục có tên là lengthgì?

localStorage.length = "foo";
localStorage.length  // => 0
localStorage.setItem("length","foo");
// the "length" key is now only accessable via the getter method:
localStorage.length  // => 1
localStorage.getItem("length") // => "foo"

Với các thành viên khác của đối tượng Storage, điều đó thậm chí còn quan trọng hơn, vì chúng có thể ghi được và bạn có thể vô tình ghi đè lên các phương thức như getItem. Sử dụng các phương pháp API ngăn chặn bất kỳ sự cố nào có thể xảy ra và cung cấp Giao diện nhất quán.

Một điểm thú vị nữa là đoạn sau trong thông số (do tôi nhấn mạnh):

Phương thức setItem () và removeItem () phải là nguyên tử đối với sự thất bại. Trong trường hợp thất bại, phương pháp này không làm gì cả. Nghĩa là, các thay đổi đối với vùng lưu trữ dữ liệu phải thành công, hoặc vùng lưu trữ dữ liệu không được thay đổi gì cả.

Về mặt lý thuyết không có sự khác biệt giữa getters / setters và []quyền truy cập, nhưng bạn không bao giờ biết ...

Tôi biết đó là một bài đăng cũ nhưng vì không ai thực sự đề cập đến hiệu suất nên tôi đã thiết lập một số bài kiểm tra JsPerf để đánh giá nó và cũng như là một giao diện mạch lạc getItemvà setItemcũng nhanh hơn so với sử dụng ký hiệu dấu chấm hoặc dấu ngoặc đơn cũng như dễ đọc hơn nhiều.

Đây là bài kiểm tra của tôi trên JsPerf

Như nó đã được đề cập, hầu như không có sự khác biệt ngoại trừ khóa không tồn tại. Sự khác biệt về hiệu suất thay đổi tùy thuộc vào trình duyệt / hệ điều hành bạn đang sử dụng. Nhưng nó không thực sự khác nhau.

Tôi khuyên bạn nên sử dụng giao diện tiêu chuẩn, chỉ vì đó là cách sử dụng được khuyến nghị.