localStorage và sessionStorage là gì, lưu những gì? Khi dùng 2 thứ này thì có lưu ở Cookies nữa hay không?


#1

Chào các bạn, mình học HTML trên trang w3schools.com, mình có thấy nói về “HTML5 Web Storage”. Mình hiểu localStorage và session Storage dùng để lưu trữ tạm thời, bảo mật và truy xuất dữ liệu nhanh hơn Cookies.

Mình có đọc nhiều bài viết nói:
localStorage: Lưu trữ dữ liệu vô thời hạn, có nghĩa dữ liệu sẽ không bị mất cho tới khi bạn sử dụng chức năng clear history của trình duyệt.
sessionStorage: Cũng tương tự như localStorage, chỉ có một điểm khác đó là dữ liệu của sessionStorage sẽ mất khi bạn đóng trình duyệt.

Mình chưa hiểu, mình luôn thấy mọi trang web sau khi tắt và mở lại đều không lưu dữ liệu gì cả.
Có phải người lập trình phải hiểu 2 thứ đó lưu những gì thì mới chủ động viết ra hàm?
Và khi dùng 2 thứ đó thì có lưu ở dưới Cookie nữa hay không?

Các bạn cho mình ví dụ để mình hiểu với! Please!


#2

Chào Bạn @Hoai_Thu ,

Khi bạn mở trang web thì bạn chỉ thấy phần nổi của tảng băng chìm. Lý do mình nói thế là bởi vì, trang web bên cạnh phục vụ nội dung cho bạn xem, thì còn có những xử lý khác nữa.

Ví dụ:
Nếu bạn đăng nhập facebook rồi, thì lần sau đóng trình duyệt và mở lại, bạn không cần đăng nhập nữa. Vậy, họ đã làm điều đó như thế nào?
=> họ sẽ phải lưu một chuỗi mã duy nhất định danh cho bạn. Chuỗi này lưu ở đâu? có thể là cookie, localstorage, hoặc session storage.
Không tin, bạn thử:

  1. đăng nhập facebook và đóng trình duyệt rồi mở lại trình duyệt và vào facebook
  2. đăng nhập facebook và đóng trình duyệt, mở trình duyệt, clear cache, và mở trang facebook lại. Lúc này bạn sẽ yêu cầu đăng nhập

Vậy là bạn hiểu rằng, trang web sẽ phải lưu vài thứ vào trình duyệt của bạn rồi đúng không? việc tiếp theo là lựa chỗ để lưu mà thôi.

Hy vọng câu trả lời giúp ích cho bạn.


#3

Cảm ơn bạn đã trả lời câu hỏi của mình.
Mình biết là khi đăng nhập vào trang web nào đó, nó có thể lưu tạm thời thông tin của mình để truy cập nhanh vào lần sau.

Mình chưa hiểu là khi tạo ra một trang web thì người ta phải biết là dữ liệu nào nên được lưu và lưu ở đâu thì người ta mới viết ra các hàm phải không bạn?


#4

Chính xác @Hoai_Thu, là developer, mình phải biết là mình cần lưu gì để đặt được điều gì


#5

Cảm ơn bạn nhiều, đó là câu trả lời mình muốn biết.

Ví dụ như mình đăng nhập vào một trang web để mua hàng thì thông tin đăng nhập của mình như: tên đăng nhập, mật khẩu nó sẽ tự động hiện hoặc tự động đăng nhập khi mình truy cập lần sau (Những thông tin đó được lưu vào cookies hoặc localStorage).
Còn khi mình chọn mua một món đồ nào đó, số lượng bao nhiêu thì nó lưu vào sessionStorage.

Mình nghĩ như vậy có đúng không bạn? Nếu mình chưa đúng, bạn ví dụ cho mình hiểu với!


#6

Điểm thứ nhất, là khi bạn đăng nhập, các giá trị tự điền vào thì việc này hầu như không developer nào dám làm cả, vì, sao dám lưu mật khẩu của user mà không mã hóa. Việc bạn thấy các mật khẩu tự động điền thường là do người dùng bấm lưu mật khẩu khi trình duyệt hỏi người dùng, việc này trình duyệt tự làm. Hầu hết là thế.

Điểm thứ 2, việc bạn lưu vào đâu thì tùy bài toán, tùy yêu cầu thì bạn phải đề xuất giải pháp, vì không nằm trong bài toán cụ thể nên Sang không thể phán là làm thế này, làm thế kia được. Cái đó bạn hiểu cơ chế làm việc và tìm giải pháp.

Còn với bài toán bạn đưa ra ví dụ, là việc lưu giỏ hàng, thì việc này phụ thuộc vào tình huống:

  1. Nếu người đã đăng nhập, bạn chỉ cần lưu thông tin giỏ hàng của người dùng này vào cơ sở dữ liệu. Trong khóa học lập trình back-end của CiOne có đồ án là tạo một trang như tiki.vn, sẽ nói về việc này

  2. Nếu người dùng chưa đăng nhập. Tất nhiên là bạn không thể ép người ta đăng nhập rồi, cho nên bạn cần lưu thông tin giỏ hàng trong chính trình duyệt của người dùng. Câu hỏi là lưu ở đâu?
    a. Nếu lưu vào session storage, khi người dùng đóng trình duyệt thì giỏ hàng mất. Bạn có muốn vậy không?
    b. Nếu lưu vào local storage, khi người dùng đóng trình duyệt và mở lại trang web thì giỏ hàng vẫn còn, ồ, quá tiện đi chứ.

Vậy bạn có thể quyết định là nên lưu vào local storage hay session storage rồi đúng không? :slight_smile:


#7

Cảm ơn bạn nhiều, mình đã hiểu ra một ít.
Nhưng mình vẫn chưa hiểu, lưu vào sessionStorage là lưu những gì?
Bạn cho mình thêm ví dụ với, mình sẽ hiểu.


#8

@Hoai_Thu: Ví dụ thông tin giỏ hàng, thì bạn lưu ID của sản phẩm, và số lượng của sản phẩm đó. Vậy là bạn hiểu rồi đúng không? :slight_smile:


#9

Mình mới học HTML thôi nên mình chưa hiểu rõ nó. Mình cứ nghĩ thông tin về sản phẩm của khách hàng được lưu ở máy chủ thôi.
Cảm ơn bạn nhiều. Có vấn đề gì mình sẽ hỏi thêm. Chúc bạn luôn vui vẻ nhak.