Sử dụng LocalStorage, SessionStorage và Cookie

LocalStorage, SessionStorage và cookie là ba cách lưu trữ dữ liệu khác nhau trong trình duyệt.

localStorage

Bạn có thể lưu trữ giá trị các biến vào localStorage của trình duyệt, biến đã lưu vào đây thì không bị quá hạn. Biến sẽ tồn tại cho đến khi bạn xóa nó bằng JavaScript hoặc xóa cache của trình duyệt.

localStorage cho phép bạn lưu thông tin tương đối lớn, lên đến 5MB.

Các biến trong localStorage không được trình duyệt gửi lên server như cookie.

Xem các biến localStorage

Để xem localStorage bằng trình duyệt các bạn vào trang web cần xem rồi gõ phím F12 để mở Developer Tools ==> nhắp tab Application ==> nhắp Storage ==> LocalStorage 

Bạn sẽ thấy các biến và giá trị của  nó, có thể xóa nếu muốn.

Lưu giá trị của biến vào localStorage

Dùng 1 trong 3 cách sau:

localStorage.setItem('key', 'value');
localStorage.key = 'value';
localStorage['key'] = 'value';

Trong đó: key là tên biến, value là giá trị của biến.

Lấy giá trị biến trong localStorage

Để lấy giá trị localStorage, dùng 1 trong 2 cách:

localStorage.getItem('key');
localStorage.key;

Đếm các biến trong localStorage

Để đếm số lượng các biến trong localStorage, sử dụng length như sau:

localStorage.length();

Xóa biến trong localStorage

Để xóa 1 biến trong localStorage, sử dụng removeItem(tên_key)

localStorage.removeItem(key);
localStorage.clear(); // xóa tất cả các biến trong localStorage

Tham khảo thêm: https://www.w3schools.com/jsreF/prop_win_localstorage.asp

Session Storage

SessionStorage là nơi lưu trữ biến trong trình duyệt. Dữ liệu bạn lưu ở đây sẽ tự động bị xóa khi đóng tab. Các biến trong sessionStorage không được gửi lên Server khi request. Thông tin lưu trữ trong sessionStorage lưu nhiều hơn cookie (ít nhất 5MB)

Xem các biến trong sessionStorage

Trong khi đang xem 1 trang web, gõ phím F12 ==> nhắp Application ==> Storage ==> SessionStorage  ==> sẽ thấy các biến trong sessionstorage

Lưu giá trị của biến vào sessionStorage

Dùng 1 trong 3 cách sau:

sessionStorage.setItem('key', 'value');
sessionStorage.key = 'value';
sessionStorage ['key'] = 'value';

Lấy ra giá trị biến trong sessionStorage

Để lấy giá trị của 1 biến trong sessionStorage, dùng 1 trong 2 cách:

sessionStorage.getItem('name');
sessionStorage.key;

Đếm các biến trong sessionStorage

Để đếm số lượng các biến trong sessionStorage, sử dụng length như sau:

 sessionStorage.length;

Xóa biến trong sessionStorage

Để xóa 1 biến trong sessionStorage, sử dụng removeItem(tên_key)

sessionStorage.removeItem('name');
sessionStorage.clear(); // xóa tất cả các biến trong sessionStorage

Tham khảo thêm: https://www.w3schools.com/jsref/prop_win_sessionstorage.asp

Dữ liệu được lưu trong localStorage là tách biệt theo domain của website. Do đó, website A không thể truy xuất dữ liệu trong localStorage của website B và ngược lại. Đây là một tính năng bảo mật quan trọng. Ngay cả sub-domain cũng được coi như một domain name riêng.

Giới hạn của LocalStorage là khác nhau giữa các trình duyệt, thường từ 5MB đến 10MB. Vì LocalStorage chỉ dùng lưu data dưới dạng từng cặp key-value, nên với kích thước bộ nhớ như vậy là quá đủ với một web app thông thường.

Với sessionStorage, một trang web được mở trong hai tab của cùng một trình duyệt cũng không thể truy xuất dữ liệu lẫn nhau. Khi bạn đóng trang web thì dữ liệu lưu trong sessionStorage hiện tại bị xóa. Còn với localStorage: có thể truy xuất lẫn nhau giữa các cửa sổ trình duyệt, và dữ liệu sẽ được lưu trữ không giới hạn thời gian.

Cookie

Cookie là nơi lưu trữ các biến đặc biệt trong trình duyệt, nó có thời điểm quá hạn và nó được http gửi tự động lên server mỗi khi có request từ client. Đây là 2 điểm mà cookie khác với localStorage và sessionStorage.

Cookie chỉ có thể lưu trữ tối đa 4KB với vài chục biến cookie cho một domain.

Xem các biến cookie

Trong khi đang xem 1 trang web, gõ phím F12 ==> nhắp Application ==> Storage ==> Cookies ==> sẽ thấy các biến trong cookie

Tạo biến cookie

document.cookie = 'username=teo';

có thể tạo biến đồng thời khai báo thời điểm quá hạn cho cookie

document.cookie = 'username=teo; expires=Web, 15 July 2020 8:00:00 UTC';

Hoặc đặt giờ sau bao lâu cookie sẽ hết hạn với max-age (tính bằng giây)

document.cookie = 'username=teo; max-age=84000';

Lấy ra giá trị tất cả các biến cookie

var x = document.cookie;

Lệnh document.cookie sẽ trả lại tất cả các biến cookie trong một chuỗi tring kiểu như: cookie1 = giá trị; cookie2 = giá trị; cookie3 = giá trị;

Lấy ra giá trị 1 biến cookie

Bạn cần viết hàm lấy giá trị của 1 cookie như sau:

function getCookie(cname) {
    var name = cname + '=';
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return '';
}

Ví dụ muốn lấy giá trị của cookie tên là lang :

var lang = getCookie('lang');
console.log(lang);

Thay đổi giá trị cookie

Trong javascript, có thể thay đổi 1 cookie giống như cách tạo ra cookie, tức là ghi đè giá trị mới lên cookie đã có:

document.cookie = "username=ty; expires=Thu, 16 Jyly 2020 9:00:00 UTC";

Kiểm tra biến cookie

Để kiểm tra 1 biến cookie có tồn tại không, có thể xây dựng hàm như sau:

function checkCookie() {
    var username = getCookie('username');
    if (username != '') {
        alert('Welcome again ' + username);
    } else {
        username = prompt('Please enter your name: ',  '');
        if (username != '' && username != null) {
            setCookie('username', username, 365);
        }
    }
}

Xóa 1 biến cookie

Để xóa một biến cookie chỉ cần gán lại giá trị ngày hết hạn expires về một thời điểm quá khứ

document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 UTC';