HTML5 Local Storage lưu lại một vài thông tin ở phía trình duyệt của người dùng, để lần sau truy cập ta có thể truy xuất các thông tin này.

Lưu mảng vào dữ liệu cục bộ – HTML5 Local Storage

Kiểm tra trình duyệt có hỗ trợ HTML5 Local Storage

Bạn dùng đoạn mã sau.

if(typeof(Storage) !== 'undefined') {
    // Có thể sử dụng
} else {
    // Trình duyệt không hỗ trợ
}

Lưu trữ giá trị vào HTML5 Local Storage

localStorage.setItem('website', 'Init HTML');

Lấy giá trị đã lưu

var website = localStorage.getItem('website');

Xóa giá trị đã lưu

localStorage.removeItem('website');

Lưu mảng một chiều

var follow = JSON.parse(localStorage.getItem("follow")) || [];
follow.unshift('Init HTML'); // Thêm giá trị vào đầu mảng
localStorage.setItem("follow", JSON.stringify(follow));

Lưu ý: unshift() là hàm thêm giá trị vào đầu mảng, nếu muốn thêm vào cuối, bạn có thể sử dụng hàm push(). Để lọc những giá trị bị trùng, các bạn có thể thêm vào phương thức lọc giá trị như sau.

function onlyUnique(value, index, self) {
    return self.indexOf(value) === index;
}

var follow = JSON.parse(localStorage.getItem("follow")) || [];
follow.unshift('Init HTML');
follow = follow.filter(onlyUnique); // Lọc giá trị trùng
localStorage.setItem("follow", JSON.stringify(follow));

Lưu trữ mảng hai chiều

Tương tự như mảng một chiều, nhưng unshift() hoặc push() thêm một mảng.

var follow = JSON.parse(localStorage.getItem("follow")) || [];
follow.unshift(['Init HTML', 'https://www.inithtml.com', 'Khởi đầu dự án web']);
localStorage.setItem("follow", JSON.stringify(follow));

Chúc các bạn thành công!