Tạo bài viết
Đăng ký
19/09/2018, 15:07

Local Storage – Lưu trữ dữ liệu trong HTML5

Lưu trữ dữ liệu trực tiếp trên trình duyệt được đánh giá tốt hơn so với việc sử dụng cookie. Local Storage là gì? Lưu trữ cục bộ là gì? Với việc sử dụng local storage (hay còn gọi là lưu trữ cục bộ ), ứng dụng web có thể lưu trữ dữ liệu trực tiếp trên trình duyệt của người dùng. ...

Lưu trữ dữ liệu trực tiếp trên trình duyệt được đánh giá tốt hơn so với việc sử dụng cookie.

Local Storage là gì? Lưu trữ cục bộ là gì?

Với việc sử dụng local storage (hay còn gọi là lưu trữ cục bộ), ứng dụng web có thể lưu trữ dữ liệu trực tiếp trên trình duyệt của người dùng.

Trước khi HTML5 ra đời, dữ liệu web được lưu trữ vào cookie và những dữ liệu này đều được gửi kèm mỗi khi trình duyệt gửi yêu cầu tới máy chủ. Local Storage an toàn hơn cookie và có thể chứa khối lượng dữ liệu lớn mà không làm ảnh hưởng tới hiệu suất của website.

Không giống cookies, Local Storage có giới hạn lưu trữ lớn hơn rất nhiều (ít nhất là 5MB) và những dữ liệu này không cần phải gửi tới máy chủ trong quá trình trao đổi dữ liệu giữa trình duyệt với máy chủ.

Tất cả các trang từ cùng một nguồn (cùng tên miền và giao thức), có thể lưu trữ và truy cập vào cùng một khu vực dữ liệu.

Trình duyệt hỗ trợ

Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.

Thuộc tính Icon Chrome Icon FireFox Icon IE Icon Safari Icon Opera
Local Storage 4.0 3.5 8.0 4.0 11.5

Các kiểu lưu trữ trong Local Storage

Local storage cung cấp 2 kiểu lưu trữ dữ liệu trên máy người dùng:

  • window.localStorage – Lưu trữ dữ liệu không giới hạn thời gian
  • window.sessionStorage – Chỉ lưu trữ dữ liệu trong một phiên làm việc (dữ liệu sẽ bị xóa khi người dùng đóng cửa sổ trình duyệt)

Trước khi sử dụng local storage, bạn nên kiểm tra trình duyệt của người dùng có hỗ trợ localStorage và sessionStorage hay không:

1
2
3
4
5
if(typeof(Storage) !== "undefined") {
    // Có thể sử dụng localStorage/sessionStorage.
} else {
    // Trình duyệt không hỗ trợ Local storage.
}

localStorage

localStorage được sử dụng để chứa những dữ liệu không giới hạn thời gian. Những dữ liệu này sẽ không bị xóa khi người dùng đóng cửa sổ trình duyệt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<body>
 
<div id="result"></div>
 
<script>
// Kiểm tra trình duyệt có hỗ trợ local storage không
if (typeof(Storage) !== "undefined") {
// Lưu trữ
localStorage.setItem("website", "webvn.com");
// Lấy dữ liệu
document.getElementById("result").innerHTML = localStorage.getItem("website");
} else {
document.getElementById("result").innerHTML = "Rất tiếc, trình duyệt của bạn không hỗ trợ local storage...";
}
</script>
 
</body>
</html>

Demo

Giải thích ví dụ:

  • Tạo một localStorage với tên là “website” và giá trị là “webvn.com”
  • Lấy giá trị của localStorage có tên là “website” và chèn vào thẻ có id=”result”

Ví dụ bên trên có thể được viết theo cách khác như sau:

1
2
3
4
// Lưu trữ
localStorage.website = "webvn.com";
// Lấy dữ liệu
document.getElementById("result").innerHTML = localStorage.website;

Cú pháp để xóa “website” trong localStorage như sau:

1
localStorage.removeItem("website");

Lưu ý: Cả tên và giá trị đều được lưu dưới dạng chuỗi ký tự. Bạn nhớ chuyển đổi chúng nếu muốn sử dụng sử dụng ở định dạng khác (ví dụ kiểu số).

Ví dụ dưới đây dùng để đếm số lần mà người dùng đã nhấn vào nút. Lúc này, giá trị lưu trữ cần phải được chuyển đổi sang kiểu số trước khi sử dụng:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Bạn đã nhấn vào nút trên " + localStorage.clickcount + " lần.";
} else {
document.getElementById("result").innerHTML = "Rất tiếc, trình duyệt của bạn không hỗ trợ Local Storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Nhấn vào đây!</button></p>
<div id="result"></div>
<p>Nhấn vào nút bên trên để thấy cách ví dụ hoạt động.</p>
<p>Đóng cửa sổ trình duyệt và thử lại. Bạn sẽ thấy số lần nhấp vào nút sẽ được tiếp tục tăng thay vì đếm lại từ đầu.</p>
</body>
</html>

Demo

sessionStorage

sessionStorage hoạt động giống như localStorage ngoại trừ việc nó chỉ lưu trữ dữ liệu trên một phiên làm việc. Dữ liệu sẽ bị xóa khi người dùng đóng cửa sổ trình duyệt.

Ví dụ dưới đây cũng sử dụng để đếm số lần người dùng đã nhấn vào nút, nhưng kết quả chỉ được lưu trong phiên làm việc hiện tại:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Bạn đã nhấn vào nút trên " + sessionStorage.clickcount + " lần trong phiên làm việc này.";
} else {
document.getElementById("result").innerHTML = "Rất tiếc, trình duyệt của bạn không hỗ trợ Local Storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Nhấn vào đây!</button></p>
<div id="result"></div>
<p>Nhấn vào nút bên trên để thấy cách ví dụ hoạt động.</p>
<p>Đóng cửa sổ trình duyệt và thử lại. Bạn sẽ thấy kết quả trong phiên làm việc trước sẽ bị xóa đi.</p>
</body>
</html>

Demo

Bùi Văn Nam

27 chủ đề

7090 bài viết

Có thể bạn quan tâm
0
Các chủ đề đang được quan tâm
phần mềm lập trình php | lập trình web php + mysql | khóa học lập trình php | tự học lập trình php | học php cơ bản thachpham | Code24h | Cho thuê phòng trọ hà nội | Cho thuê phòng trọ bình thạnh | Cho thuê phòng trọ | Cho thuê nhà trọ
Đăng ký

Đăng ký nhận thông báo

Các bài học thú vị sẽ được gửi đến inbox của bạn

HỖ TRỢ HỌC VIÊN
VỀ CODE24H
HỢP TÁC VÀ LIÊN KẾT
KẾT NỐI VỚI CHÚNG TÔI
TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

CCode 24h, code mọi lúc, mọi nơi

© Copy right 2018 - 2024