Lưu trữ dữ liệu trên trình duyệt với Web Storage API trong JavaScript

Trong quá trình phát triển các ứng dụng web hiện đại, việc lưu trữ dữ liệu phía người dùng (client-side) là một nhu cầu phổ biến và thiết yếu. Từ việc ghi nhớ thông tin đăng nhập, lưu trạng thái giao diện đến lưu tạm dữ liệu nhập liệu – tất cả đều đòi hỏi một cơ chế lưu trữ hiệu quả, đơn giản và nhanh chóng.

Web Storage API ra đời như một giải pháp nhẹ nhưng mạnh mẽ để giải quyết nhu cầu đó. Thay vì phụ thuộc hoàn toàn vào backend hoặc cookies, Web Storage API cho phép JavaScript lưu trữ dữ liệu ngay trong trình duyệt dưới dạng key-value, mà không cần tải lại trang hay gửi dữ liệu về server.

Trong bài viết này, mình sẽ cùng tìm hiểu chi tiết về Web Storage API, cách sử dụng hai cơ chế chính là localStorage và sessionStorage, so sánh đặc điểm của chúng, đồng thời khám phá các ứng dụng thực tế và một số lưu ý khi triển khai.

Khái niệm về Web Storage API trong JavaScript

Web Storage API là một API do trình duyệt cung cấp, cho phép các lập trình viên JavaScript lưu trữ dữ liệu ngay trên trình duyệt của người dùng mà không cần phải gửi dữ liệu đó về server hay sử dụng cơ sở dữ liệu phía backend. Dữ liệu được lưu trữ dưới dạng cặp key-value (khóa – giá trị), rất đơn giản và dễ truy xuất.

Khác với cookies – vốn có dung lượng nhỏ và thường xuyên được gửi kèm theo mỗi request HTTP, Web Storage API hoạt động hoàn toàn phía client và không làm ảnh hưởng đến hiệu suất giao tiếp với server. Điều này giúp giảm tải cho mạng và tăng tốc độ xử lý dữ liệu cục bộ.

Web Storage API bao gồm hai hình thức lưu trữ chính:

localStorage

• Dữ liệu được lưu lâu dài trên trình duyệt, kể cả khi người dùng đóng trình duyệt hoặc tắt máy.

• Dữ liệu sẽ chỉ bị xóa khi lập trình viên thực hiện xóa bằng mã JavaScript hoặc khi người dùng xóa thủ công (ví dụ: xóa cache, lịch sử trình duyệt).

• Phù hợp với các trường hợp cần ghi nhớ thông tin lâu dài như:

  • Tên đăng nhập,

  • Theme (giao diện sáng/tối),

  • Cài đặt người dùng,...

sessionStorage

Dữ liệu chỉ tồn tại trong phiên làm việc hiện tại, nghĩa là:

• Khi tab trình duyệt được mở → dữ liệu tồn tại.

• Khi tab đóng → dữ liệu sẽ bị xóa.

Không chia sẻ dữ liệu giữa các tab (mỗi tab có một phiên sessionStorage riêng biệt).

Phù hợp để lưu dữ liệu tạm thời như:

• Trạng thái biểu mẫu đang nhập,

• Kết quả tìm kiếm tạm thời,

• Lưu bước trong một quy trình ngắn gọn (wizard, checkout...).

Nhờ sự đơn giản, hiệu quả và dễ triển khai, Web Storage API đang trở thành một phần không thể thiếu trong phát triển giao diện web hiện đại. Trong các phần tiếp theo, ta sẽ tìm hiểu sâu hơn về cách sử dụng cụ thể và ứng dụng thực tế của API này.

So sánh localStorage và sessionStorage trong JavaScript

Cả localStorage và sessionStorage đều là thành phần của Web Storage API, cho phép lưu trữ dữ liệu trên trình duyệt dưới dạng key-value. Tuy nhiên, giữa hai loại này có những điểm khác biệt rõ rệt về phạm vi và thời gian tồn tại của dữ liệu. Bảng dưới đây giúp bạn dễ hình dung hơn:

Như vậy, nếu bạn cần lưu dữ liệu trong thời gian ngắn, gắn với một phiên làm việc cụ thể – hãy dùng sessionStorage. Ngược lại, nếu dữ liệu cần được "ghi nhớ" lâu dài – localStorage sẽ là lựa chọn phù hợp hơn. Việc lựa chọn đúng loại lưu trữ sẽ giúp tăng hiệu quả và trải nghiệm người dùng trong ứng dụng web của bạn.

Các phương thức chính của Web Storage trong JavaScript

Cả localStorage và sessionStorage đều sử dụng chung một tập các phương thức để thao tác với dữ liệu được lưu dưới dạng key-value. Những phương thức này giúp bạn dễ dàng lưu, truy xuất, cập nhật hoặc xóa dữ liệu trên trình duyệt của người dùng.

Dưới đây là mô tả chi tiết từng phương thức:

setItem(key, value)

Chức năng: Lưu dữ liệu vào storage với một khóa (key) xác định.

Cú pháp:

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

Ghi chú:

• Dữ liệu sẽ được lưu dưới dạng chuỗi (string).

• Nếu key đã tồn tại, phương thức này sẽ ghi đè giá trị cũ.

getItem(key)

• Chức năng: Lấy dữ liệu tương ứng với một key đã lưu.

• Cú pháp:

let name = localStorage.getItem("username");
console.log(name); // "trungkien"

Ghi chú:

• Trả về null nếu key không tồn tại.

• Phù hợp để kiểm tra hoặc xử lý logic điều kiện.

removeItem(key)

Chức năng: Xóa một item (key-value pair) khỏi storage.

Cú pháp:

localStorage.removeItem("username");

Ghi chú:

• Không gây lỗi nếu key không tồn tại, chỉ đơn giản là không làm gì.

clear()

• Chức năng: Xóa toàn bộ dữ liệu trong localStorage hoặc sessionStorage.

Cú pháp:

sessionStorage.clear();

Ghi chú:

• Cẩn trọng khi dùng, vì tất cả các key-value sẽ bị xóa sạch khỏi bộ nhớ.

key(index)

Chức năng: Trả về tên của key tại chỉ số (index) cụ thể.

Cú pháp:

let firstKey = localStorage.key(0);
console.log(firstKey); // Ví dụ: "username"

Ghi chú:

• Index là thứ tự lưu trữ các key (theo vị trí).

• Trả về null nếu index vượt quá số lượng phần tử lưu trong storage.

Lưu ý chung:

• Dữ liệu lưu trữ luôn ở dạng chuỗi. Nếu cần lưu object, hãy dùng JSON.stringify() khi lưu, và JSON.parse() khi đọc:

localStorage.setItem("user", JSON.stringify({ name: "Kiên", age: 20 }));
let user = JSON.parse(localStorage.getItem("user"));

Với những phương thức đơn giản nhưng mạnh mẽ này, Web Storage API trở thành công cụ đắc lực để lưu trữ dữ liệu phía client trong các ứng dụng web hiện đại.

Đặc điểm kỹ thuật của dữ liệu trong Web Storage API

Dữ liệu được lưu dưới dạng chuỗi (string)

Một trong những đặc điểm quan trọng của Web Storage (bao gồm cả localStorage và sessionStorage) là mọi giá trị lưu trữ đều được tự động chuyển về dạng chuỗi. Điều này đồng nghĩa với việc:

• Nếu bạn lưu một số (number), boolean, mảng, hoặc đối tượng thì chúng sẽ không được giữ đúng kiểu dữ liệu gốc.

• Khi gọi getItem(), dữ liệu trả về luôn là chuỗi.

Ví dụ:

localStorage.setItem("number", 123);
console.log(typeof localStorage.getItem("number")); // string

Lưu và lấy Object/Array bằng JSON

Để lưu các giá trị phức tạp như object hoặc array, bạn cần chuyển đổi chúng sang chuỗi trước khi lưu, và chuyển lại thành object khi lấy ra. Cách làm phổ biến là sử dụng hai phương thức của đối tượng JSON:

• JSON.stringify() để chuyển từ object → string

• JSON.parse() để chuyển từ string → object

Ví dụ lưu và lấy một object:

// Lưu object
const user = { name: "Đậu Trung Kiên", age: 6 };
localStorage.setItem("userInfo", JSON.stringify(user));

// Lấy object
const storedUser = JSON.parse(localStorage.getItem("userInfo"));
console.log(storedUser.name); // "Đậu Trung Kiên"

Ví dụ lưu và lấy một mảng:

const scores = [80, 90, 100];
localStorage.setItem("scores", JSON.stringify(scores));

const savedScores = JSON.parse(localStorage.getItem("scores"));
console.log(savedScores[1]); // 90

Ứng dụng thực tế của Web Storage API trong JavaScript

Web Storage API không chỉ đơn thuần là một công cụ lưu trữ dữ liệu trên trình duyệt, mà còn là một phần quan trọng trong việc nâng cao trải nghiệm người dùng, tối ưu hiệu suất, và giảm tải cho server. Dưới đây là một số ứng dụng phổ biến và thực tế:

Ghi nhớ trạng thái giao diện người dùng

Người dùng thường muốn trang web ghi nhớ các cài đặt cá nhân của họ như:

• Chế độ hiển thị: Dark mode / Light mode.

• Ngôn ngữ giao diện: Lưu lựa chọn tiếng Việt, tiếng Anh,...

• Kích thước font hoặc giao diện tùy chỉnh khác.

Ví dụ:

// Ghi nhớ chế độ dark mode
localStorage.setItem("theme", "dark");

// Khi tải lại trang
if (localStorage.getItem("theme") === "dark") {
    document.body.classList.add("dark-mode");
}

Lưu dữ liệu tạm thời khi người dùng nhập form

Trong quá trình điền form, nếu trình duyệt bị tải lại hoặc người dùng thoát nhầm tab, toàn bộ thông tin sẽ mất nếu không có lưu trữ. Web Storage giúp lưu tạm thông tin đang nhập, giúp người dùng tiếp tục dễ dàng.

Ví dụ:

document.querySelector("#email").addEventListener("input", function (e) {
    sessionStorage.setItem("emailDraft", e.target.value);
});

// Khi reload lại trang
document.querySelector("#email").value = sessionStorage.getItem("emailDraft") || "";

Giỏ hàng trong website thương mại điện tử

Web Storage có thể lưu thông tin giỏ hàng như sản phẩm đã chọn, số lượng, tùy chọn,... giúp:

• Giữ nguyên trạng thái giỏ hàng dù tải lại trang.

• Giảm số lần truy vấn server.

• Cải thiện trải nghiệm người dùng không đăng nhập.

Ví dụ:

const cart = [
    { id: 1, name: "Sách JavaScript", quantity: 2 },
    { id: 2, name: "Balo học sinh", quantity: 1 }
];
localStorage.setItem("cartItems", JSON.stringify(cart));

// Khi truy cập lại
const savedCart = JSON.parse(localStorage.getItem("cartItems"));

Lưu cache dữ liệu cho SPA (Single Page Application)

Với các ứng dụng một trang (SPA), việc gọi API liên tục có thể gây chậm. Web Storage cho phép:

• Lưu tạm kết quả từ API (danh sách sản phẩm, cấu hình, v.v...).

• Giảm độ trễ và cải thiện hiệu suất hiển thị.

• Giữ trạng thái giao diện khi người dùng quay lại trang.

Ví dụ:

fetch("https://api.example.com/products")
    .then(res => res.json())
    .then(data => {
        localStorage.setItem("cachedProducts", JSON.stringify(data));
        displayProducts(data);
    });

// Nếu có cache
const cached = localStorage.getItem("cachedProducts");
if (cached) {
    displayProducts(JSON.parse(cached));
}

Một số ví dụ minh họa Web Storage API trong JavaScript

Ví dụ 1: Lưu tên người dùng vào localStorage

// Lưu tên
localStorage.setItem("username", "Nguyen Van A");

// Lấy và hiển thị
const name = localStorage.getItem("username");
console.log(`Xin chào, ${name}`);

Ví dụ 2: Lưu và lấy danh sách object từ localStorage

// Danh sách sản phẩm
const products = [
    { id: 1, name: "Sách HTML", price: 50000 },
    { id: 2, name: "Sách CSS", price: 60000 }
];

// Lưu vào localStorage (dùng JSON.stringify)
localStorage.setItem("productList", JSON.stringify(products));

// Lấy lại danh sách (dùng JSON.parse)
const storedProducts = JSON.parse(localStorage.getItem("productList"));
console.log(storedProducts);

Ví dụ 3: Lưu thông tin tạm thời của form với sessionStorage

<input type="text" id="email" placeholder="Nhập email...">

// Lưu khi người dùng gõ
document.getElementById("email").addEventListener("input", (e) => {
    sessionStorage.setItem("emailInput", e.target.value);
});

// Phục hồi khi tải lại trang
const savedEmail = sessionStorage.getItem("emailInput");
if (savedEmail) {
    document.getElementById("email").value = savedEmail;
}

Kết bài

Web Storage API là một công cụ mạnh mẽ và tiện lợi trong JavaScript giúp lưu trữ dữ liệu phía client một cách đơn giản, nhanh chóng mà không cần đến backend hay cơ sở dữ liệu phức tạp. Với hai lựa chọn linh hoạt là localStorage và sessionStorage, lập trình viên có thể dễ dàng lựa chọn phương án phù hợp với nhu cầu về thời gian tồn tại và phạm vi dữ liệu.

Tuy không phù hợp cho những dữ liệu nhạy cảm hoặc cần xử lý thời gian thực, nhưng Web Storage API vẫn là giải pháp lý tưởng cho các trường hợp như lưu cấu hình người dùng, giỏ hàng, hoặc trạng thái tạm thời trong các ứng dụng web hiện đại. Việc hiểu và sử dụng thành thạo Web Storage sẽ giúp bạn nâng cao trải nghiệm người dùng và tối ưu hiệu suất giao diện một cách hiệu quả.