Sử dụng localStorage trên website như thế nào

Vì sao chúng ta cần localStorage

Nói đến HTTP, nó là dạng kết nối stateless, nghĩa là khi đóng một ứng dụng web, lần truy cập sau mọi thứ bị reset lại như ban đầu.

localStorage đơn giản là nó giúp dev chúng ta lưu lại một vài thông tin ở phía trình duyệt của user, để lần sau truy cập ta có thể truy xuất các thông tin này.

Cookie không đủ xài

Cookie là một dạng file text lưu trên máy tính của user, link đến từng domain. Một vài giới hạn của cookie

Tất cả request đến domain, đều sẽ nhét cái cookie này vào trên header

Tối đa có 4KB dung lượng

Sử dụng local Storage trên trình duyệt hỗ trợ HTML5

Cú pháp để set, get, delete giá trị của localStorage

// set
localStorage.setItem(‘tentui’,’luubinhan’);

// get
Var tentui = localStorage.setItem(‘tentui’);
// -> luubinhan

// delete
localStorage.removeItem(‘tentui’);

Làm việc trên object

Vì khi lưu chúng ta chỉ có thể đưa string vào trong localStorage, để đưa một object

Var user = {
	Name: ‘an’,
	Age: ‘18+’,
	Gender: ‘superman’
}
localStorage.setItem(‘user’, JSON.stringify(user));
Console.log(JSON.parse(localStorage.getItem(‘user’));

Thông tin lưu xuống localStorage

• Để cache những dữ liệu lớn, tốn thời gian để load.
• Lưu lại trạng thái của giao diện user đã custom, có thể lưu cả một đoạn HTML xuống localStorage

Có thể bạn quan tâm:

• Tại sao không nên lưu trữ data user trên local Storage?
• Local storage là gì? Xin hãy ngừng dùng local Storage
• Dùng gì để lưu trữ data thay thế local Storage?

Xem thêm các việc làm Web Developer hấp dẫn tại TopDev

TopDev via Vuilaptrinh