JavaScript - localStorage và sessionStorage

06/04/2019, 11:03 AM | 08/04/2019, 8:24 AM | 839 | 037

      Trong Javascript ta đã được tìm hiểu về cách lưu thông tin trình duyệt của người dùng với cookie, bài này sẽ giới thiệu hai cách lưu thông tin trên client khác nữa đó là localStorage và sessionStorage.
1. localStorage trong Javascript
      localStorage lưu trữ thông tin trên trình duyệt của người dùng ( client ) vô thời hạn, nó chỉ mất đi khi người dùng xóa đi bằng cách clear history, localStorage cho phép lưu dữ liệu khoảng 5MB.
      Với localStorage thì một số trình duyệt phiên bản cũ sẽ không hỗ trợ nên bạn cần kiểm tra trước khi thực hiện bằng cách sau :

if (typeof(Storage) !== "undefined") {
    // Trình duyệt có hỗ trợ local storage
} else {
    //Trình duyệt không hỗ trợ local storage
}

Ta có thể thao tác với localStorage như sau :

Name	Mô tả
localStorage.setItem(key, value)	Thêm mới dữ liệu với key là tên và value là giá trị
localStorage.getItem(key)	Lấy dữ liệu của localStorage với key là tên lúc ta thêm dữ liệu
localStorage.removeItem(key)	Xóa dữ liệu của localStorage với key là tên lúc ta thêm dữ liệu
localStorage.clear()	Xóa hết dữ liệu trong localStorage
localStorage.length	Đếm tổng số lượng localStorage đã lưu trong trình duyệt

Ví dụ :

Xem DEMO

<html>
    <head>
        <title></title>
    </head>
    <body>
      <p id="all"></p>
      <p id="list"></p>
      <input type="text" id="name" placeholder="Nhập tên Storage" value="" />
      <input type="text" id="value" placeholder="Nhập value Storage" value="" />
      <input type="button" value="Thêm Storage" onclick="AddStorage()"/>
      <p>Lấy giá trị Storage :</p>
      <input type="text" id="GetValue" placeholder="Nhập tên Storage" value="" />
      <input type="button" value="Get Storage" onclick="GetStorage()"/>
      <p>Xóa Storage :</p>
      <input type="text" id="delete" placeholder="Nhập Tên Storage" value="" />
      <input type="button" value="Xóa Storage" onclick="DeleteStorage()"/>
      <p>Xóa tất cả Storage :</p>
      <input type="button" value="Xóa Tất Cả Storage" onclick="DeleteALL()"/>
      <script language="javascript">
           if (typeof(Storage) !== "undefined") {
                // Hiển thị tổng số Stogare
                Storagelength();
            } else {
                document.write('Trình duyệt không hỗ trợ localStorage !');
            }
            // Hàm thêm mới
            function AddStorage(){
                var Name = document.getElementById('name');
                var Value = document.getElementById('value');
                // Truyền tên và value từ hai textbox vào
                localStorage.setItem(Name.value, Value.value);
                // Gọi hàm đếm lại tổng số storage
                Storagelength();
                // đưa texbox về rỗng
                Name.value = '';
                Value.value = '';
                alert('Thêm mới thành công');
            }
            // Hàm lấy giá trị storage theo tên truyền vào
            function GetStorage(){
                var Name = document.getElementById('GetValue').value;
                // truyền vào tên storage muốn lấy giá trị
                var Value = localStorage.getItem(Name);
                alert('Giá trị của Storage có tên ' + Name + ' là : ' + Value);
                Storagelength();
            }
            // Hàm Xóa giá trị storage theo tên truyền vào
            function DeleteStorage(){
                var Delete = document.getElementById('delete').value;
                // truyền vào tên storage muốn xóa
                localStorage.removeItem(Delete);
                Storagelength();
                alert('Xóa thành công');
            }
            // Hàm xóa tất cả
            function DeleteALL(){
                // xóa tất cả
                localStorage.clear();
                Storagelength();
                alert('Xóa thành công');
            }
            // Hàm đếm tổng số Storage
            function Storagelength(){
                document.getElementById('all').innerHTML = 
                  'Tổng Storage là : ' + localStorage.length;
              
                // tạo vòng lặp in ra danh sách tên và value Storage 
				var data = 'Danh sách Storage: ';
                for (i = 0; i < localStorage.length; i++) {
                    data += (localStorage.key(i) + "=[" + localStorage.getItem(localStorage.key(i)) + "] ");
                }
				document.getElementById('list').innerHTML = data;

            }
        </script>
    </body>
</html>

Ví dụ trên mình làm tổng hợp luôn cho người dùng nhập vào và đã chú thích trong đó rồi nên sẽ không giải thích thêm.
2. sessionStorage trong Javascript
sessionStorage tương tự như localStorage chỉ khác ở chỗ dữ liệu của sessionStorage sẽ mất khi bạn đóng trình duyệt. Vì vậy ví dụ bạn có thể làm tương tự như ví dụ trên chỉ thay sessionStorage cho localStorage là được.
Chú ý : Ngoài ra bạn có thể thêm vào lấy dữ liệu của sessionStorage và localStorage bằng cách sau :

if (typeof(Storage) !== "undefined") {
    // Gán dữ liệu
    sessionStorage.KeyName= 'vnfree.net';
     
    // Lấy dữ liệu
    var domain = sessionStorage.KeyName; // vnfree.net
} else {
    document.write('Trình duyệt của bạn không hỗ trợ local storage');
}