Cách thức HTML

Trần Đức Lĩnh

Data Attribute

  • Trong các phần tử của HTML có các tiền tố data-thì đều gọi chung là Data Attribute.
  • Mục đích giúp lưu thêm thông tin vào các phần tử bên trong HTML, giúp lấy được thông tin ra bằng JS hoặc CSS một cách nhanh chóng.

Truy cập Data attribute bằng JS.

<ul>
    <li id="dataAtri" data-name="Old_name">Hello</li>
</ul>
var ele = document.getElementById('dataAtri');
console.log(ele.dataset.name);
// Old_name
ele.dataset.name = 'New_name';

console.log(ele.dataset.name);
// New_name

Truy cập Data attribute bằng CSS.

<ul>
    <li id="dataAtri" data-name="_name">Hello</li>
</ul>
li[data-name="_name"] {
    background: red;
}

Local Storage.

  • Local Storage cho phép lưu trữ thông tin tương đối lớn lên đến 5MB. Lưu trữ dữ liệu không quy định thời gian, không gửi dữ liệu lên server nên bảo mật tốt hơn.
  • Chia sẻ key:value cho nhiều cửa sổ trình duyệt khác trong cùng browser.

Tạo file thứ (1).html.

function localData () {
    const varLocal = 'XSD';
    localStorage.setItem('key', varLocal);
};

localData();

Tạo file thứ (2).html và lấy giá trị **varLocal**.

var a = localStorage.getItem('key');
    console.log(a);
    // XSD
  • Xóa tất cả các biến trong localStorage.

    localStorage.clear();

Session Storage.

  • Session Storage cho phép lưu trữ thông tin tương đối lớn lên đến 5MB.
  • Giống như local Storage, nhưng dữ liệu sẽ biến mất sau khi đóng trình duyệt.
  • Chỉ giới hạn key:value trong 1 cửa sổ trình duyệt nhất định, không thể truy suất giống như local Storage.
function localData () {
    const varLocal = 'XSD_Session';
    sessionStorage.setItem('key', varLocal);
};

localData();

var outData = sessionStorage.getItem('key');
console.log(outData);
// XSD_Session

Cookie.

  • Thông tin sẽ được gửi lên server, những thông tin quan trọng có thể được lấy cắp thông qua cookie.
  • Cookie đa số đọc ở phía máy chủ, ngoại lệ vẫn có thể đọc ở phía máy khách giống như local Storagesession Storage.
  • Có thể tự quy định tồn tại các thông tin trong khoảng thời gian bao lâu.
  • Chỉ giới hạn thông tin chỉ 4Kb và vài chục cookie trong cùng 1 domain.

Tạo cookie.

document.cookie = 'username=Ted Mosby';
var readCookie = document.cookie;

console.log(readCookie);
// username=Ted Mosby

(Còn nữa...)