Live Code Editor

<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>