Sự khác nhau và cách sử dụng Local Storage, Session Storage và Cookie
Bạn bị lẫn lộn giữa session storage, local storage và cookies? Bài viết dưới đây sẽ giúp bạn hiểu rõ được sự khác nhau giữa 3 cách lưu trữ này. Các kiểu không gian lưu trữ khác nhau có sẵn cho các dữ liệu có thể trên máy chủ hoặc máy khách, cho phép chúng ta chọn lựa theo nhu cầu.
1. Local storage
Giới thiệu:
- Khả năng lưu trữ vô thời hạn: Có nghĩa là chỉ bị xóa bằng JavaScript, hoặc xóa bộ nhớ trình duyệt, hoặc xóa bằng localStorage API.
- Lưu trữ được 5MB: Local Storage cho phép bạn lưu trữ thông tin tương đối lớn lên đến 5MB, lưu được lượng thông tin lớn nhất trong 3 loại.
- Không gửi thông tin lên server như Cookie nên bảo mật tốt hơn.
Trình duyệt hỗ trợ:
Chrome | >= 4.0 |
Internet Explorer / Edge | >= 8.0 |
Firefox | >= 3.5 |
Safari | >= 4.0 |
Chrome | >= 11.5 |
Để kiểm tra xem trình duyệt có hỗ trợ localStorage hay không thì chúng ta dùng typeof
như sau:
if [typeof[Storage] !== 'undefined'] {
//Nếu có hỗ trợ
//Thực hiện thao tác với Storage
alert['Trình duyệt của bạn hỗ trợ Storage'];
} else {
//Nếu không hỗ trợ
alert['Trình duyệt của bạn không hỗ trợ Storage'];
}
Xem localStorage bằng trình duyệt
Để xem localstorage bằng trình duyệt các bạn vào trang web cần xem [ở đây mình ví dụ với trang web //book.framgia.vn/] và sau đó các bạn ấn F12 [hoặc Ctrl + shift + i] sau đó làm theo như hình sau:
Sử dụng
- Khởi tạo localStorage
localStorage.setItem['key', 'value'];
// hoặc
localStorage.key = 'value';
// hoặc
localStorage['key'] = 'value';
Trong đó:
key
là tên biến,value
là giá trị của biến muốn gán vào.
- Để lấy giá trị localStorage và sử dụng, ta dùng
getItem
localStorage.getItem['key'];
// hoặc
localStorage.key;
Ví dụ cụ thể như sau:
- Để lấy số lượng localStorage đã có trong trình duyệt, sử dụng
length
như sau:
localStorage.length[];
Ví dụ
if [typeof[Storage] !== "undefined"] {
//Nếu hỗ trợ
var data = localStorage.length;
console.log[data];
} else {
// Nếu không hỗ trợ
alert['Trình duyệt của bạn không hỗ trợ'];
}
- Để xóa 1 biến trong localStorage, sử dụng
removeItem[tên_key]
localStorage.removeItem[key];
Hoặc xóa tất cả các biến trong localStorage, sử dụng clear
localStorage.clear[];
2. Session Storage
Giới thiệu:
- Lưu trên Client: Cũng giống như localStorage thì sessionStorage cũng dùng để lưu trữ dữ liệu trên trình duyệt của khách truy cập [client].
- Mất dữ liệu khi đóng tab: Dữ liệu của sessionStorage sẽ mất khi bạn đóng trình duyệt.
- Dữ liệu không được gửi lên Server
- Thông tin lưu trữ nhiều hơn cookie [ít nhất 5MB]
Trình duyệt hỗ trợ
Chrome | >= 5.0 |
Internet Explorer / Edge | >= 8.0 |
Firefox | >= 2 |
Safari | >= 4.0 |
Opera | >= 10.5 |
Vì sessionStorage cũng nằm trong gói Storage nên các bạn cũng có thể sử dụng lại đoạn code kiểm tra trình duyệt có hỗ trợ Storage hay không ở phía trên.
Xem Session Storage bằng trình duyệt
Tương tự như localStorage, có thể chọn mở rộng mục Session Storage để xem các giá trị được lưu trữ.
Sử dụng
sessionStorage cũng có cú pháp và cách sử dụn các thuộc tính, phương thức như localStorage:
if [ typeof[Storage] !== 'undefined'] {
// Khởi tạo sesionStorage
sessionStorage.setItem['name', 'Ted Mosby'];
// get sessionStorage
sessionStorage.getItem['name'];
// lấy ra số lượng session đã lưu trữ
sessionStorage.length;
// xóa 1 item localStorage
sessionStorage.removeItem['name'];
// xóa tất cả item trong sessionStorage
sessionStorage.clear[];
} else {
alert['Trình duyệt của bạn không hỗ trợ!'];
}
3. Cookie
Giới thiệu:
- Thông tin được gửi lên server: Cookie sẽ được truyền từ server tới browser và được lưu trữ trên máy tính của bạn khi bạn truy cập vào ứng dụng, mỗi khi người dùng tải ứng dụng, trình duyệt sẽ gửi cookie để thông báo cho ứng dụng về hoạt động trước đó của bạn. Vì vậy đừng bao giờ lưu trữ những thông tin quan trọng, yêu cầu tính bảo mật cao vào cookie vì nó hoàn toàn có thể bị sửa đổi và đánh cắp, thấp chí có thể lợi dụng điều này để tấn công website của bạn.
- Cookie chủ yếu là để đọc phía máy chủ [cũng có thể được đọc ở phía máy khách], localStorage và sessionStorage chỉ có thể được đọc ở phía máy khách.
- Có thời gian sống: Mỗi cookie thường có khoảng thời gian timeout nhất định do lập trình viên xác định trước.
- Lưu trữ: cho phép lưu trữ tối đa 4KB và vài chục cookie cho một domain.
Xem cookie bằng trình duyệt
Tương tự như localStorage, có thể chọn mở rộng mục Cookies để xem các giá trị cookie được lưu trữ
Sử dụng
Cookie có thể được tạo bằng nhiều cách, bài viết này sẽ trình bày về sử dụng cookie trong javascript. JavaScript có thể tạo, đọc, và xóa cookies với document.cookie
.
- Tạo cookie: Javascript có thể tạo cookie như sau:
document.cookie = 'username=Ted Mosby';
Chúng ta cũng có thể thêm vào ngày hết hạn cho cookie
document.cookie = 'username=Ted Mosby; expires=Thu, 18 Dec 2018 8:00:00 UTC';
Hoặc đặt hẹn giờ sau bao lâu cookie sẽ hết hạn với max-age
[tính bằng giây]
document.cookie = 'username=Ted Mosby; max-age=9000';
- Đọc cookie:
var x = document.cookie;
document.cookie
sẽ trả lại tất cả cookie trong một chuỗi tring kiểu như: cookie1 = giá trị; cookie2 = giá trị; cookie3 = giá trị;
Hoặc để lấy giá trị của 1 cookie, có thể viết một hàm như sau:
function getCookie[cname] {
var name = cname + '=';
var decodedCookie = decodeURIComponent[document.cookie];
var ca = decodedCookie.split[';'];
for[var i = 0; i