Local Storage là gì? Tìm hiểu cách hoạt động và thao tác cơ bản trên Local Storage

Local Storage là một tính năng của HTML5 cho phép các website lưu trữ dữ liệu trực tiếp trên trình duyệt của người dùng một cách bền bỉ. Bài viết này mình sẽ giúp bạn hiểu rõ hơn về Local Storage, phân biệt với Session Storage và Cookie, đồng thời cung cấp các ví dụ thực tế và những lưu ý quan trọng để bạn có thể sử dụng công cụ này một cách hiệu quả và an toàn.

Những điểm chính

1. Khái niệm Local Storage: Là tính năng HTML5 cho phép website lưu trữ dữ liệu bền bỉ ngay trên trình duyệt của người dùng.
2. Đặc điểm của Local Storage: Nổi bật với dung lượng lớn, dữ liệu không hết hạn và không tự động gửi dữ liệu lên máy chủ.
3. Ưu và nhược điểm của Local Storage: Ưu điểm là dung lượng lớn, dữ liệu bền bỉ; nhược điểm là không bảo mật và chỉ lưu chuỗi.
4. Local Storage hoạt động như thế nào: Lưu dữ liệu dạng cặp key-value và được quản lý bằng các phương thức JavaScript đơn giản.
5. So sánh Local Storage với Session Storage và cookie: Local Storage lưu dữ liệu bền bỉ, Session Storage theo phiên, Cookie gửi dữ liệu lên server.
6. Thao tác cơ bản trên Local Storage với JavaScript: Là cách sử dụng các lệnh như setItem, getItem và xử lý object bằng JSON.
7. Những trình duyệt hỗ trợ Local Storage: Hầu hết các trình duyệt hiện đại đều hỗ trợ, nhưng nên kiểm tra để tương thích với phiên bản cũ.
8. Những lưu ý quan trọng khi sử dụng Local Storage: Không lưu dữ liệu nhạy cảm, quản lý dữ liệu không cần thiết và xử lý kiểu dữ liệu chuỗi.
9. Biết đến dịch vụ Vietnix Object Storage là giải pháp lưu trữ tối ưu cho doanh nghiệp.
10. Giải đáp thắc mắc thường gặp khi sử dụng Local Storage.

Local Storage là gì?

Local Storage là một cơ chế lưu trữ dữ liệu cho phép các ứng dụng web và JavaScript lưu trữ và truy cập dữ liệu trực tiếp trong trình duyệt mà không bị giới hạn thời gian, do HTML5 cung cấp. Khác với cookie hay session storage, dữ liệu lưu trong Local Storage sẽ không bị mất đi kể cả khi tắt trình duyệt hoặc khởi động lại máy tính. Người dùng chỉ mất dữ liệu khi tự tay xóa hoặc khi lập trình viên chủ động dọn dẹp.

Dữ liệu trong Local Storage được tổ chức theo dạng cặp khóa giá trị (key-value), tất cả thông tin đều được lưu dưới dạng chuỗi văn bản. Vì vậy, khi bạn muốn lưu trữ dữ liệu kiểu phức tạp như object hoặc array, bạn cần chuyển nó về dạng chuỗi JSON trước.

Đặc điểm của Local Storage

Một số đặc điểm quan trọng của Local Storage bao gồm:

• Cho phép lưu trữ dung lượng lớn hơn nhiều so với cookie (thường khoảng 5MB cho mỗi website).
• Dữ liệu được lưu dưới dạng chuỗi nên các kiểu dữ liệu khác như số hoặc object cần chuyển đổi sang chuỗi khi lưu và ngược lại khi lấy ra.
• Dữ liệu trong Local Storage không có thời gian hết hạn, chỉ bị xóa khi người dùng thực hiện thủ công hoặc qua lập trình.
• Local Storage hoạt động hoàn toàn trên phía client, không cần kết nối mạng khi truy cập dữ liệu.
• Dữ liệu trong Local Storage không tự động được gửi kèm theo mỗi yêu cầu HTTP đến máy chủ, giúp tối ưu trải nghiệm người dùng và giảm tải cho máy chủ khi không cần tải lại dữ liệu lặp lại nhiều lần.

Tuy nhiên, Local Storage không phù hợp để lưu trữ dữ liệu nhạy cảm vì không được mã hóa và dễ bị truy cập bởi mã JavaScript trên website. Dung lượng lưu trữ có giới hạn và hoạt động đồng bộ có thể gây giật lag nếu lưu lượng dữ liệu lớn.

Ưu và nhược điểm của Local Storage

Để hiểu rõ hơn về khả năng ứng dụng của Local Storage trong phát triển web, bạn cần xem xét những ưu và nhược điểm của công nghệ này, từ đó đánh giá tính phù hợp khi áp dụng vào từng trường hợp cụ thể.

Local Storage hoạt động như thế nào?

Local Storage lưu dữ liệu trực tiếp trên trình duyệt dưới dạng các cặp key value và giữ nguyên dữ liệu kể cả khi đóng trình duyệt hoặc tắt máy. Dữ liệu chỉ bị xóa khi người dùng hoặc mã JavaScript xóa thủ công.

Trong JavabScript, Local Storage được quản lý thông qua đối tượng localStorage với 5 phương thức cơ bản sau:

• setItem(key, value) – Lưu dữ liệu vào Local Storage: Phương thức này cho phép thêm mới hoặc cập nhật một cặp dữ liệu dưới dạng key–value. Tham số key là tên dùng để truy cập dữ liệu, còn value bắt buộc phải là chuỗi. Nếu muốn lưu object hoặc mảng, bạn cần sử dụng JSON.stringify() để chuyển đổi trước khi lưu. Ví dụ:

localStorage.setItem("username", "Daniel");

• getItem(key) – Lấy dữ liệu từ Local Storage: Dùng để truy xuất giá trị ứng với một khóa đã lưu. Nếu khóa tồn tại, giá trị trả về sẽ ở dạng chuỗi; nếu không tồn tại, kết quả sẽ là null. Khi giá trị là dữ liệu phức tạp, cần dùng JSON.parse() để chuyển lại thành kiểu dữ liệu ban đầu. Ví dụ:

let user = localStorage.getItem("username");

• removeItem(key) – Xóa một mục dữ liệu: Phương thức này xóa hẳn một cặp key–value khỏi Local Storage. Chỉ cần truyền tên khóa cần xóa, dữ liệu tương ứng sẽ bị loại bỏ. Điều này hữu ích khi bạn muốn gỡ bỏ thông tin cụ thể, chẳng hạn token đăng nhập hoặc cài đặt tùy chọn cũ. Ví dụ:

localStorage.removeItem("username");

• clear() – Xóa toàn bộ dữ liệu trong Local Storage: Khi gọi phương thức này, toàn bộ các cặp key–value hiện có sẽ bị xóa hoàn toàn mà không cần chỉ định khóa cụ thể. Hành động này sẽ reset dữ liệu về trạng thái rỗng, thường dùng khi muốn xóa toàn bộ thông tin lưu trữ của ứng dụng. Ví dụ:

localStorage.clear();

• key(index) – Lấy tên khóa theo vị trí: Trả về tên của khóa tại vị trí index trong Local Storage. Vị trí bắt đầu từ 0, và phương thức này thường được dùng để duyệt qua tất cả dữ liệu hiện có. Ví dụ:

let firstKey = localStorage.key(0);

So sánh Local Storage với Session Storage và cookie

Bảng so sánh giữa Local Storage, Session Storage và Cookie giúp bạn dễ dàng phân biệt các phương thức lưu trữ dữ liệu trên trình duyệt, từ đó lựa chọn phù hợp cho từng ứng dụng:

Tóm lại:

• Local Storage phù hợp cho việc lưu trữ dữ liệu lâu dài, không cần gửi đến server và dữ liệu không nhạy cảm.
• Session Storage lý tưởng để lưu dữ liệu tạm thời trong phiên làm việc, không chia sẻ giữa các tab khác nhau.
• Cookie được sử dụng khi cần lưu dữ liệu để gửi về server như quản lý phiên hoặc tracking người dùng, đồng thời có thể bảo mật hơn nếu dùng HttpOnly.

Việc lựa chọn giải pháp lưu trữ phụ thuộc vào mục đích, yêu cầu bảo mật cũng như phạm vi truy cập dữ liệu của bạn.

Kiểm tra hỗ trợ của trình duyệt

Hầu hết các trình duyệt web phổ biến hiện nay đều hỗ trợ Local Storage, nhưng việc kiểm tra tính tương thích vẫn là một thói quen lập trình tốt để đảm bảo ứng dụng không bị lỗi trên các trình duyệt cũ.

if (typeof(Storage) !== "undefined") {
    // Code sử dụng localStorage và sessionStorage ở đây
    console.log("Trình duyệt của bạn hỗ trợ Web Storage.");
} else {
    console.log("Rất tiếc, trình duyệt của bạn không hỗ trợ Web Storage.");
}

Bạn có thể sử dụng DevTools của trình duyệt để xem và thay đổi Local Storage. Dưới đây là cách thực hiện:

1. Mở DevTools: Bạn nhấn tổ hợp phím Ctrl + Shift + I (trên Windows) hoặc Cmd + Opt + I (trên macOS) để mở bảng điều khiển DevTools. Một cách khác là bạn click chuột phải vào trang web và chọn Inspect.
2. Chọn tab Application: Trong DevTools, bạn tìm và chọn tab Application (hoặc Storage đối với một số trình duyệt).
3. Mở Local Storage: Ở thanh bên trái, bạn tìm đến phần Local Storage và click vào đó.
4. Kiểm tra dữ liệu: Lúc này, bạn sẽ thấy danh sách các cặp khóa – giá trị (key-value pairs) đã được lưu. Bạn có thể thêm, sửa, hoặc xóa dữ liệu ngay trên giao diện này.

Các phương thức cơ bản

localStorage cung cấp một bộ API rất đơn giản và dễ sử dụng.

• Lưu một mục: setItem(key, value)

// Lưu một chuỗi với key là 'theme' và value là 'dark'
localStorage.setItem('theme', 'dark');

• Lấy một mục: getItem(key)

// Đọc giá trị của key 'theme'
let currentTheme = localStorage.getItem('theme'); // currentTheme sẽ là "dark"

• Xóa một mục: removeItem(key)

// Xóa mục có key là 'theme'
localStorage.removeItem('theme');

• Xóa toàn bộ dữ liệu: clear()

// Xóa tất cả các mục đã được lưu trong localStorage của trang web này
localStorage.clear();

Lưu trữ object hoặc array (JSON.stringify và JSON.parse)

Local Storage chỉ có thể lưu trữ dữ liệu dạng chuỗi. Nếu bạn cố gắng lưu một đối tượng hoặc mảng trực tiếp, sẽ bị chuyển đổi thành chuỗi "[object Object]" và mất hết dữ liệu. Để giải quyết vấn đề này, bạn có thể sử dụng cặp phương thức JSON.stringify() và JSON.parse().

// 1. Tạo một đối tượng JavaScript
const userSettings = {
    username: 'vietnix_user',
    theme: 'dark',
    notifications: true
};

// 2. Chuyển đổi thành chuỗi JSON và lưu vào localStorage
// JSON.stringify() biến object thành một chuỗi
localStorage.setItem('userSettings', JSON.stringify(userSettings));

// 3. Đọc chuỗi từ localStorage và chuyển đổi ngược lại thành object
// JSON.parse() biến chuỗi JSON trở lại thành object
const savedSettings = JSON.parse(localStorage.getItem('userSettings'));

console.log(savedSettings.theme); // Output: dark

Ví dụ ứng dụng thực tế

Ví dụ 1: Ghi nhớ chế độ Dark Mode

// Giả sử có một nút bấm để chuyển đổi theme
const themeToggleButton = document.getElementById('theme-toggle');

// Khi tải trang, kiểm tra lựa chọn đã lưu
const savedTheme = localStorage.getItem('theme') || 'light';
document.body.className = savedTheme;

// Khi người dùng click nút
themeToggleButton.addEventListener('click', () => {
    let newTheme = document.body.className === 'dark' ? 'light' : 'dark';
    document.body.className = newTheme;
    // Lưu lựa chọn mới vào localStorage
    localStorage.setItem('theme', newTheme);
});

Ví dụ 2: Lưu dữ liệu form chưa hoàn tất

const contactForm = document.getElementById('contact-form');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');

// Khi tải trang, điền lại dữ liệu đã lưu (nếu có)
nameInput.value = localStorage.getItem('form_name') || '';
emailInput.value = localStorage.getItem('form_email') || '';

// Khi người dùng nhập liệu, lưu lại ngay lập tức
nameInput.addEventListener('input', (e) => {
    localStorage.setItem('form_name', e.target.value);
});
emailInput.addEventListener('input', (e) => {
    localStorage.setItem('form_email', e.target.value);
});

// Khi form được gửi thành công, xóa dữ liệu đã lưu
contactForm.addEventListener('submit', () => {
    localStorage.removeItem('form_name');
    localStorage.removeItem('form_email');
});

Những trình duyệt hỗ trợ Local Storage

Hầu hết các trình duyệt web hiện đại đều đã tích hợp hỗ trợ Local Storage, đảm bảo các tính năng lưu trữ dữ liệu phía client hoạt động mượt mà. Điều này bao gồm các trình duyệt nổi tiếng như:

• Google Chrome (phiên bản 4.0 trở lên).
• Mozilla Firefox (phiên bản 3.5 trở lên).
• Apple Safari (phiên bản 4 trở lên).
• Internet Explorer (phiên bản 8 trở lên).
• Microsoft Edge (phiên bản 12 trở lên).
• Opera (phiên bản 11 trở lên).
• Chrome cho Android (phiên bản 18 trở lên).
• Firefox cho Android (phiên bản 4 trở lên).
• Safari trên iOS (phiên bản 3.2 trở lên).

Nhờ đó, bạn có thể lập trình web sử dụng Local Storage mà không cần lo lắng về sự tương thích cho phần lớn người dùng Internet hiện nay.

Tuy nhiên, những trình duyệt phiên bản quá cũ hoặc một số hệ điều hành lạ (ví dụ như một số trình duyệt trên smart TV đời cũ) có thể không hỗ trợ tính năng này. Để đảm bảo ứng dụng chạy ổn định trên mọi nền tảng, bạn nên luôn kiểm tra khả năng hỗ trợ Local Storage của trình duyệt trước khi sử dụng bằng thao tác mình đã hướng dẫn ở phần trên.

Những lưu ý quan trọng khi sử dụng Local Storage

Để sử dụng Local Storage hiệu quả và an toàn, bạn cần nắm rõ một số lưu ý quan trọng dưới đây:

• Vấn đề bảo mật là điều quan trọng nhất: Local Storage không phải là nơi an toàn để lưu trữ thông tin nhạy cảm như mật khẩu, mã thẻ tín dụng hay token xác thực. Bởi vì dữ liệu trong Local Storage rất dễ bị kẻ tấn công truy cập thông qua các cuộc tấn công XSS, khi kẻ xấu chèn mã JavaScript độc hại trên website và lấy cắp dữ liệu từ trình duyệt người dùng.
• Không lưu trữ dữ liệu kích thước lớn hoặc không cần thiết: Mặc dù dung lượng lớn hơn cookie nhưng vẫn có giới hạn. Bạn cần quản lý và xóa bớt dữ liệu không cần thiết để tránh đầy bộ nhớ.
• Lưu ý tính đồng bộ trong thao tác đọc/ghi: Các thao tác với Local Storage đều thực hiện đồng bộ, nghĩa là trình duyệt sẽ phải chờ hoàn thành thao tác này trước khi thực hiện tác vụ tiếp theo. Điều này có thể làm giảm hiệu suất nếu thao tác ghi/đọc dữ liệu quá lớn hoặc nhiều.
• Dữ liệu chỉ lưu dưới dạng chuỗi: Local Storage chỉ hỗ trợ lưu trữ dữ liệu kiểu chuỗi nên khi làm việc với các kiểu phức tạp như object hoặc array, bạn cần sử dụng JSON.stringify() để chuyển đổi trước khi lưu và JSON.parse() để chuyển đổi ngược lại khi lấy dữ liệu.
• Dữ liệu không tự động xóa: Dữ liệu trong Local Storage sẽ tồn tại lâu dài cho đến khi người dùng hoặc ứng dụng chủ động xóa đi, không có cơ chế tự động hết hạn hay làm mới. Vì vậy, bạn nên có kế hoạch dọn dẹp hoặc quản lý dữ liệu này phù hợp để tránh bị đầy hoặc lưu trữ thông tin lỗi thời.

Giải pháp lưu trữ tối ưu cho doanh nghiệp với Vietnix Object Storage 

Local Storage là một công cụ phía client mạnh mẽ, nhưng giới hạn của cơ chế này nhanh chóng bộc lộ khi ứng dụng của bạn cần xử lý dữ liệu lớn và phức tạp hơn như hình ảnh, video, hay các bản sao lưu quan trọng. Đây chính là lúc bạn cần một giải pháp lưu trữ tập trung, có khả năng mở rộng và an toàn. Vietnix Object Storage là câu trả lời hoàn hảo cho bài toán này.

Với hạ tầng đặt tại Việt Nam, dịch vụ của Vietnix giúp tăng tốc độ truy xuất dữ liệu, loại bỏ độ trễ từ máy chủ quốc tế. Nền tảng tương thích 100% S3 API cho phép tích hợp liền mạch vào ứng dụng của doanh nghiệp, cùng với mô hình chi phí minh bạch – miễn phí hoàn toàn băng thông ra và không giới hạn request – giúp bạn tối ưu ngân sách hiệu quả. Đây là lựa chọn lý tưởng để giảm tải cho máy chủ và giải quyết bài toán lưu trữ quy mô lớn một cách chuyên nghiệp.

Thông tin liên hệ:

• Website: https://vietnix.vn/.
• Hotline: 18001093.
• Email: sales@vietnix.com.vn.
• Địa chỉ: 265 Hồng Lạc, Phường Bảy Hiền, Thành phố Hồ Chí Minh.

Tóm tắt lại, Local Storage là một phương pháp lưu trữ dữ liệu trong trình duyệt web, cho phép các trang web lưu trữ dữ liệu mà không có thời hạn hết hạn. Đây là một công cụ tiện lợi để duy trì các cài đặt và trạng thái của ứng dụng qua các phiên duyệt web. Tuy nhiên, các nhà phát triển cần cân nhắc kỹ lưỡng về mục đích sử dụng để đảm bảo tính bảo mật và hiệu suất của ứng dụng.