Kiến thức căn bản sử dụng localStorage để lưu thông tin cần thiết xuống trình duyệt
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