- vừa được xem lúc

Javascript: Chưa chắc bạn đã hiểu về Local storage như bạn nghĩ đâu!

0 0 26

Người đăng: Tờ Mờ Sáng học Lập trình

Theo Viblo Asia

Mở đầu

Trong quá trình viết bài "Bộ câu hỏi phỏng vấn Fresher Web Fullstack - Phần 2 - Frontend - Javascript", đến đoạn viết về Local storage thì mình nhớ ra rằng, trong quá trình phỏng vấn có rất nhiều bạn sinh viên không biết hoặc hiểu sai về kiến thức này.

Vì vậy không đợi đến khi viết xong bài viết Phần 2 kia nữa, mình quyết định đăng ngay nội dung về Local storage để các bạn đọc trước.

Chưa chắc bạn đã hiểu về Local storage như bạn nghĩ đâu!

Vấn đề

Nhiều bạn khi nhận được câu hỏi về Local storagengơ ngác, không hiểu mình đang nhắc đến cái gì. Đó là dấu hiệu cho thấy các bạn chưa sẵn sàng, chưa chuẩn bị kỹ trước khi đi phỏng vấn. Hi vọng bài viết này của mình sẽ đủ dễ hiểu để giúp ích cho các bạn nắm được kiến thức cơ bản này. Trong quá trình làm việc thực tế, chúng ta sẽ thường xuyên phải sử dụng đến chúng.

Khá hơn một chút, thì có một số bạn trả lời được sơ qua về lý thuyết, nhưng lại chưa thử sử dụng nó khi code bao giờ. Cũng không biết xem những thông tin này ở đâu trên trình duyệt. Hãy thực hành, thực hành và thực hành nhiều hơn nữa nhé. Khi thực hành và sử dụng chúng thường xuyên, thì các bạn sẽ không cần phải nhớ hay học thuộc lý thuyết nữa, mà khi được phỏng vấn câu hỏi này, mọi logic như thế đã có sẵn trong đầu bạn. Khi ấy câu trả lời của bạn sẽ tự tin hơn rất nhiều.

Local storage lưu trữ ở đâu?

Hầu hết các bạn sinh viên mình phỏng vấn đều trả lời rằng "Local storage lưu dữ liệu trên trình duyệt". Có lẽ bởi vì nhiều bài viết hoặc video trên mạng mà các bạn xem được nói vậy, và các bạn chưa kịp kiểm chứng.

Thực tế điều này là KHÔNG ĐÚNG.

Các bạn có thể hiểu đơn giản, trình duyệt như Google Chrome, Firefox, Microsoft Edge, ... cũng chỉ là một phần mềm.

Mà để sử dụng được phần mềm thì các bạn sẽ phải download nó về, cài đặt vào ổ cứng, rồi mới sử dụng được. Local storage là một phần đi kèm cùng trình duyệt, và nó cũng sử dụng ổ cứng làm nơi lưu trữ dữ liệu.

Cụ thể, để kiểm chứng, các bạn có thể truy cập theo các đường dẫn sau để đến được thư mục lưu dữ liệu Local storage của Google Chrome trên ổ cứng máy tính của mình:

  • Thư mục Local Storage Google Chrome trên Windows:

    %LocalAppData%\Google\Chrome\User Data\Default\Local Storage\

  • Thư mục Local Storage Google Chrome trên Linux:

    ~/.config/google-chrome/Default/Local Storage/

  • Thư mục Local Storage Google Chrome trên Mac:

    ~/Library/Application Support/Google/Chrome/Default/Local Storage/

Với các trình duyệt khác, các bạn có thể search Google với từ khóa "<Tên trình duyệt> local storage location" để tìm hiểu nha. Ví dụ: "firefox local storage location"

ssd.png

Dữ liệu trong Local storage được lưu trữ trong bao lâu?

Vì được lưu trên ổ cứng máy tính của bạn, nên mới dẫn đến kết luận "Local storage lưu trữ dữ liệu vô thời hạn, dù có tắt trình duyệt đi rồi bật lại thì dữ liệu trong Local storage vẫn ở đó".

Nếu muốn xóa dữ liệu đi, thì bạn có thể sử dụng Javascript hoặc xóa trực tiếp trong thư mục ở trên.

Local storage cho phép lưu trữ dung lượng tối đa là bao nhiêu?

"Local storage cho phép bạn lưu trữ tối đa 5MB dữ liệu". Thực ra vẫn có nhiều người phỏng vấn chấp nhận câu trả lời này, vì ngày trước thì đúng là như vậy. Tuy nhiên ở thời điểm hiện tại, các trình duyệt đã tăng con số tối đa lên 10MB:

Các bạn có thể copy đoạn mã Javascript sau và paste vào tab Console của trình duyệt, để xem trình duyệt mình đang sử dụng sẽ giới hạn dung lượng tối đa lưu vào local storage là bao nhiêu:

// @author tmsangdev
function insertCharactersToLocalStorage(numberOfKilobytes) { let numberOfBytes = numberOfKilobytes * 1024; return new Array(numberOfBytes).join('a');
} localStorage.removeItem('list_test_characters');
localStorage.removeItem('local_storage_size_in_megabytes'); var index = 0;
const MAXIMUM_DATA_SIZE_IN_KILOBYTES = 20480;
const ADDED_DATA_SIZE_PER_TIME_IN_KILOBYTES = 128;
try { for (index = 0; index <= MAXIMUM_DATA_SIZE_IN_KILOBYTES; index += ADDED_DATA_SIZE_PER_TIME_IN_KILOBYTES) { localStorage.setItem('list_test_characters', insertCharactersToLocalStorage(index)); }
} catch (e) { console.log(e); let localStorageSizeInMegabytes = index ? `${(index - ADDED_DATA_SIZE_PER_TIME_IN_KILOBYTES) * 2 / 1024}MB` : "0MB"; localStorage.setItem('local_storage_size_in_megabytes', localStorageSizeInMegabytes);
}

Khi vượt quá giới hạn tối đa, sẽ có DOMException trả về, thông báo rằng "exceeded limit quota"

Giới hạn này áp dụng cho MỖI ORIGIN, chứ không phải toàn bộ dữ liệu trong local storage. Các bạn có thể hiểu nôm na rằng: mỗi trang web sẽ có 1 local storage riêng và sẽ không thể truy cập sang dữ liệu local storage của trang web khác.

Cách xem Local storage trên trình duyệt?

  1. Đứng ở trang web nhấn F12 (hoặc nhấn chuột phải, rồi chọn Inspect)
  2. Chọn tab Application
  3. Quan sát menu bên trái, phần Storage, chọn mũi tên bên cạnh option Local Storage
  4. Chọn domain bạn muốn xem

Screenshot 2023-05-23 at 17.45.38.png

Nên lưu dữ liệu gì vào Local storage?

Vì Local storage chỉ chứa được khoảng 10MB dữ liệu thôi, nên đừng trả lời ngây ngô rằng "em sẽ lưu dữ liệu của toàn bộ trang web vào đây" nhé. Dự án của các công ty có tới hàng chục, hàng trăm GB dữ liệu, làm sao có thể lưu vào Local Storage được.

Nhiều bạn sinh viên trả lời với mình rằng: các bạn ứng dụng local storage vào làm tính năng Giỏ hàng như kiểu Shopee.

  • Câu trả lời sẽ chỉ hợp lý trong trường hợp người dùng chưa đăng nhập tài khoản, khi đó bạn không biết người dùng là ai, thì có thể lưu hàng hóa đã chọn vào local storage để tắt trình duyệt đi bật lại, hàng hóa trong giỏ vẫn không mất đi.
  • Nhưng nếu trường hợp người dùng đã đăng nhập rồi, thì việc lưu hàng hóa trong Giỏ hàng vào local storage lại không hợp lý chút nào. Vì như mình nói ở trên, dữ liệu local storage được lưu trên ổ cứng của mỗi máy riêng biệt, nên bạn sẽ KHÔNG THỂ lấy được dữ liệu trên trang web đó khi sử dụng một thiết bị khác. Tức là, nếu các bạn đăng nhập và đặt hàng trên máy tính hoặc tablet, sau đó chuyển sang đăng nhập điện thoại thì sẽ không thấy hàng hóa đã chọn đâu nữa. Trong trường hợp này, lưu vào Database sẽ là lựa chọn hợp lý hơn.

Những dữ liệu mà khi làm dự án bọn mình thường lưu là: username, ngôn ngữ hiển thị trên trang (language), theme (dark/light), ...

Một số lưu ý khác về Local storage

Dữ liệu trong local storage sẽ không tự động gửi đến server thông qua request header như cookies. Nhưng đương nhiên nếu muốn, bạn vẫn có thể thêm thủ công bằng code Javascript.

KHÔNG THỂ xử lý bất đồng bộ (asynchronous) với local storage. Các thao tác với localStorage như setItem, getItem sẽ phải được thực hiện lần lượt, thao tác thứ nhất thực hiện xong, trả về kết quả, thì mới có thể thực hiện tiếp thao tác thứ hai.

Trong Javascript, localStorage là một thuộc tính của đối tượng window.

  • Nếu các bạn chưa biết, thì window là một đối tượng global, cho phép tương tác với cửa sổ trình duyệt.
  • Có thể khi code Javascript, các bạn đã từng sử dụng đến window.outerWidth, window.outerHeight để lấy chiều rộng và chiều cao của cửa sổ trình duyệt, thì đối tượng window ở đây, cũng chính là đối tượng chứa thuộc tính localStorage đó.

Kết bài

Trên đây là những đặc điểm quan trọng của Local storage. Hi vọng bài viết này sẽ hữu ích với các bạn. Các bạn cũng có thể đọc thêm các bài viết khác trong series Bộ câu hỏi phỏng vấn Fresher Web Fullstack của mình nha.

Nhân tiện đây, mình cũng xin được gửi lời cảm ơn tới các bạn vì đã ủng hộ và theo dõi các bài viết của mình. 1000 reputations đầu tiên dù không phải con số quá lớn lao gì, nhưng đó là sự ghi nhận rất có ý nghĩa mà mình may mắn nhận được từ các bạn.

Mình hi vọng rằng những bài viết tiếp theo sẽ tiếp tục mang lại những giá trị nhất định để gửi tới mọi người.

Một lần nữa mình xin được cảm ơn các bạn rất nhiều.

See ya 🤜🤛

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 510

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 383

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 715

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 343

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 432

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 423