localStorage và sessionStorage trong Javascript

Trong bài này chung ta sẽ tìm hiểu localStorage và sessionStore trong Javascript, qua đó sẽ giúp bạn hiẻu được localStorage là gì và sessionStore là gì.

Như bạn biết, cookie trong Javascript có công dụng lưu trữ dữ liệu tạm thời ở browser. Ta thường sử dụng nó để lưu trữ các thông tin cấu hình cho mỗi trình duyệt, và đương nhiên là các thông tin này giữa các trình duyệt sẽ không liên quan với nhau.

Nhưng từ khi HTML5 ra đời thì xuất hiện thêm hai đối tượng nữa, đó là localStore và sessionStore. Về cách sử đụng hai đối tượng này không khác gì cookie, nhưng về cấu trúc hoạt động thì khác biệt rất nhiều. Chi tiết thế nào thì chúng ta cùng tìm hiểu nhé.

1. Local Storage là gì?

Local Storage là một module của javascript, hoạt động trên các trình duyệt web như Chrome / Firefox. Nó dùng để lưu trữ dữ liệu tạm thời và riêng biệt cho từng domain, nên đây được xem là giải pháp để thay thế cho cookie.

Điểm khác biệt lớn nhất giữa cookie và local storage là local storage cho phép bạn lưu trữ thông tin tương đối lớn lên đến 5MB, ngoài ra local storage không gửi thông tin lên server như cookie. Cả local storage và cookie đều không làm ảnh hưởng đến hiệu xuất của trang web.

Chúng ta có 2 loại local storage trong javascript, đó là:

• localStorage: Lưu trữ dữ liệu vô thời hạn, dữ liệu sẽ được lưu trữ cho tới khi người dùng clear history.
• sessionStorage: Lưu trữ dữ liệu cho mội phiên làm việc, có nghĩa dữ liệu sẽ bị mất khi bạn tắt browser.

Bây giờ chúng ta sẽ tìm hiểu kỹ hơn về hai đối tượng này nhé.

2. localStorage trong javascript

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 tính năng clear history của trình duyệt, hoặc bạn sử dụng chính localStorage API để xóa.

Chúng ta có hai thao tác chính, đó là gán dữ liệu và lấy dữ liệu. Và trước khi sử dụng các phương thức này thì ta phải chắc chắn là trình duyệt có hỗ trợ nhé, bởi local store chỉ hoạt động trên các trình duyệt mới nhất hiện nay (tính từ ES6 2015). Đoạn code dưới đây sẽ giúp ta kiểm tra trình duyệt có hỗ trợ localStorage hay là không.

if (typeof(Storage) !== "undefined") {
    // Có hỗ trợ local storage
} else {
    // Không hỗ trợ local storage
}

So với cookie thì chúng ta không cần làm thao tác này, đây cũng chính là điểm yếu duy nhất của local storage. Nhưng tính thời điểm hiện tại thì nó không còn là vấn đề nữa, bởi hầu hết các trình duyệt đều đã cập nhật phiên bản mới nhất.

localStorage được tích hợp sẵn vào window interface, nên để sử dụng thì bạn chỉ việc gọi đến window.localStorage. Tuy nhiên, vẫn có một biến cục bộ localStorage nên bạn có thể bỏ window interface khi sử dụng.

localStore có 5 phương thức như sau:

1. setItem(): Thêm dữ liệu vào localStorage
2. getItem(): Lấy dũ liệu từ localStorage
3. removeItem(): Xóa dữ liệu ra khỏi localStorage
4. clear(): Xóa toàn bộ dữ liệu ra khỏi localStorage
5. key(): Lấy tên key của dữ liệu đang lưu trữ trong localStorage

localStorage.setItem()

Dùng để thêm dữ liệu vào localStore, dữ liệu sẽ được lưu trữ ở dạng key => value.

localStorage.setItem(key, value);

Lưu key author với giá trị là Nguyễn Văn Cường.

localStorage.setItem('author', 'Nguyễn Văn Cường');

localStorage.getItem()

Dùng để lấy dữ liệu, tham số truyền vào chính là tên key muốn lấy. Nếu không tồn tại thì trả về undefined.

localStorage.getItem('author')

localStorage.removeItem()

Dùng để xóa dữ liệu, tham số truyền vào là key muốn xóa.

localStorage.removeItem('author');

localStorage.clear()

Xóa toàn bộ dữ liệu của localStorage.

localStorage.clear()

Ví dụ: Lưu trữ tên domain freetuts.net vào trình duyệt của người dùng khi truy cập vào website.

Bạn hãy tạo cho mình hai file a.html và b.html với nội dung như sau.

if (typeof(Storage) !== "undefined") {
    var domain = 'freetuts.net';
    localStorage.setItem('domain', domain);
} else {
    document.write('Trình duyệt của bạn không hỗ trợ local storage');
}

if (typeof(Storage) !== "undefined") {
    var domain = localStorage.getItem('domain');
    document.write(domain); // kết quả freetuts.net
} else {
    document.write('Trình duyệt của bạn không hỗ trợ local storage');
}

Bây giờ bạn hãy chạy file a.html trước, sau đó bạn chạy file b.html thì sẽ thấy thông tin domain freetuts.net đã được in lên website. Điều này cho thấy file a.html đã lưu trữ thông tin vào browser rồi nên file b.html mới có thể lấy được thông tin đó. Bây giờ bạn thử tắt trình duyệt và mở lại file b.html thì sẽ thấy dữ liệu vẫn còn.

3. sessionStorage trong javascript

Công dụng của 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, còn localStorage thì không.

Ngoài ra, sessionStorage sẽ lưu trữ khác nhau cho mỗi tab. Nghĩa là khi bạn lưu dữ liệu ở tab này, xong bạn mở tab khác lên thì sẽ không thể sử dụng được dữ liệu đó.

sessionStorage không tồn tại hai phương thức getItem và setItem mà bạn sẽ bổ sung key và value cho nó.

sessionStorage cũng có 5 phương thức như sau:

1. setItem(): Thêm dữ liệu vào sessionStorage
2. getItem(): Lấy dữ liệu từ sessionStorage
3. removeItem(): Xóa dữ liệu ra khỏi sessionStorage
4. clear(): Xóa toàn bộ dữ liệu ra khỏi sessionStorage
5. key(): Lấy tên key của dữ liệu đang lưu trữ trong sessionStorage

sessionStorage.setItem()

Dùng để lưu trữ dữ liệu vào sessionStorage. Tham số truyền vào là key và value.

sessionStorage.setItem(key, value);

Lưu key domain có giá trị là freetuts.net vào sessionStorage.

sessionStorage.setItem('domain', 'freetuts.net');

sessionStorage.getItem()

Dùng để lấy dữ liệu được lưu trữ trong sessionStorage.

sessionStorage.getItem('author')

sessionStorage.removeItem()

Dùng để xóa một key ra khỏi sessionStorage. Tham số truyền vào là key muốn xóa.

sessionStorage.removeItem('author');

sessionStorage.clear()

Dùng để xóa toàn bộ dữ liệu trên sessoinStorage.

sessionStorage.clear();

Quay lại ví dụ ở phần 2 thì mình sẽ viết lại như sau:

if (typeof(Storage) !== "undefined") {
    sessionStorage.setItem('domain', 'freetuts.net');
} else {
    document.write('Trình duyệt của bạn không hỗ trợ local storage');
}

if (typeof(Storage) !== "undefined") {
    document.write(sessionStorage.getItem('domain')); // kết quả freetuts.net
} else {
    document.write('Trình duyệt của bạn không hỗ trợ local storage');
}

Lưu ý: Khi chạy 2 link để test thì bạn phải chạy trên một tab nhé.

4. So sánh localStorage / sessionStorage và cookie

Trước đây đã có cookie rồi nhưng người ta vẫn nâng cấp thêm hai object localStorage và sessionStorage. Vậy chúng có những ưu điểm và nhược điểm gì? Khi nào thì nên sử dụng? Chúng ta cùng tìm hiểu ngay nhé.

Đối với cookie

Dữ liệu của cookie được lưu trữ riêng biệt theo từng domain, và dung lượng lưu trữ không được nhiều.

Khi một trang web được tải lên thì sẽ có rất nhiều request gửi đến server, có thể đó là những request yêu cầu tải hình ảnh, file css, file javascript ... nói chung là rất nhiều. Theo cơ chế của cookie thì bất kì một request nào gửi lên server đều gửi kèm dữ liệu cookie của domain đó. Vì vậy, với số lượng hàng trăm request đó thì có thể sẽ ảnh hưởng đến tốc độ tải trang.

Đối với localStorage và sessionStorage

Dữ liệu sẽ lưu trữ ở trình duyệt của khách mà thôi. Nó sẽ không được gửi kèm trong các request, điều này giúp giảm tải lượng dữ liệu mỗi khi load dữ liệu từ server.

Ngoài ra, dung lượng lưu trữ của Local Storage nhiều hơn so với cookie. Cụ thể như sau:

• Cookie tối đa là 4kb
• localStorage tối đa 5mb
• sessionStorage tối đa 10mb

Nếu bạn muốn lưu trữ dữ liệu dang object vào localStorage thì hãy sử dụng kết hợp với phương thức JSON.stringify. Tức là ta sẽ chuyển đối tượng đó thành một chuỗi JSON rồi lưu trữ vào local storage.

Trên là những chia sẻ về cách sử dụng localStorage và sessionStorage trong javascript. Hy vọng qua bài này sẽ giúp bạn hiểu được phần nào về hai đối tượng này, cũng như biết khi nào thì nên sử dụng cookie, khi nào thì sử dụng local storage.