Người Viết : ViKiMi Editor
Sử dụng HTML Web Storage API có thực sự cần thiết và lợi ích có thể đem lại như mong đợi
Chúng ta đã thấy rất nhiều ngôn ngữ lập trình cho phép lưu trữ dữ liệu dạng SESSION hoặc COOKIE. Hầu hết đều có thể sử dụng hiệu quả giúp Nhà Phát Triển đạt các mục đích tốt. Và cũng không ngoại lệ HTML cũng là một ngôn ngữ như vậy. Nó cho phép bạn lưu trữ dữ liệu để xử lý, và điều này cũng mang lại những mặt tích cực. Việc sử dụng nó cũng được ưu tiên.
Nếu Phát triển Website thì buộc lòng phải nắm bắt :
+ Dữ liệu có thể được lưu trữ tại SERVER
+ Hoặc dữ liệu cũng có thể lưu trữ phía máy CLIENT
Do đó việc lựa chọn lưu trữ dữ liệu như thế nào đều nhằm đạt hiệu quả cao nhất có thể. Các Lập trình viên sẽ đưa ra cách lưu trữ dữ liệu phù hợp nhất. Sử dụng HTML để lưu trữ dữ liệu tại phía CLIENT cũng được xem là một ưu tiên cao. Điều này cho phép Website hoạt động ổn định hơn.
Có rất nhiều sự lựa chọn cho Bạn! Tuy nhiên, Để lưu trữ dữ liệu phía CLIENT thì HTML là một sự lựa chọn không tồi.
VẬY CHÚNG TA CÓ GÌ VỚI HTML 5?
+ Câu trả lời : HTML Web Storage API
Chúng ta gọi đây là API lưu trữ web HTML !
>> Với bộ nhớ web, các dữ liệu được lưu trữ cục bộ trong trình duyệt của người dùng
Nhờ sự phát triển mới của HTML 5, Các lập trình viên có được sự lựa chọn cho phép Lưu trữ web an toàn hơn.
Và đồng thời dung lượng lớn dữ liệu có thể được lưu trữ cục bộ mà không ảnh hưởng đến hiệu suất trang web.
HTML Web Storage API CUNG CẤP :
[ – ] Giới hạn lưu trữ lớn hơn nhiều (ít nhất là 5 MB)
[ – ] Thông tin lưu trữ không cần phải truyền liên tục đến máy chủ như trước kia. Trước HTML 5, trong các yêu cầu của máy chủ luôn có thông tin lưu trữ. Sự phát triển mới này giúp hiệu suất tốt hơn.
CÁCH DÙNG CHUNG CỦA HTML Web Storage API :
Tất cả các trang, xuất phát từ một nguồn, có thể lưu trữ và truy cập cùng một dữ liệu.
Dữ liệu được lưu trữ bằng HTML Web Storage API
A ] Đối tượng lưu trữ web HTML / HTML Web Storage Objects
Bộ lưu trữ web HTML cung cấp hai đối tượng để lưu trữ dữ liệu trên máy khách. Cả hai loại này rất tương đồng với SESSION và COOKIES trong nhiều ngôn ngữ khác.
Sự khác biệt là với HTML thì dữ liệu sẽ lưu trữ trên máy khách, giúp nâng cao hiệu suất và giải quyết các bài toán.
Chúng ta có :
window.localStorage – Lưu trữ dữ liệu không có ngày hết hạn
window.sessionStorage – Lưu trữ dữ liệu trong một phiên (dữ liệu sẽ bị mất khi đóng tab trình duyệt)
1 ] Sử dụng LocalStorage Object
Đối tượng LocalStorage lưu trữ dữ liệu không có ngày hết hạn.
Dữ liệu sẽ không bị xóa khi đóng trình duyệt và sẽ có sẵn vào ngày, tuần hoặc năm tiếp theo.
Bạn chỉ có thể lên lịch để xoá chúng khi cần thiết.
EXAMPLE 1:
Chúng ta sử dụng đối tượng LocalStorage để lưu trữ dữ liệu trên máy Khách.
Lưu ý, đối tượng này đã được cung cấp sẵn bởi HTML. Nên công việc của bạn là chỉ cần sử dụng nó.
+ B1 : Tạo một cặp ( tên / giá trị ) của LocalStorage với name=”username” và value=”David”
Giá trị lưu trữ sẽ được lưu trữ ở máy khách !
+ B2 : Truy xuất giá trị của “username” và hiển thị vào phần tử DIV có id=”result”
Tất nhiên, việc vận dụng khi lập trình là do phía người Lập Trình Viên
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// Kiểm tra sự tồn tại đối tượng Storage
if (typeof(Storage) !== "undefined") {
// Tạo cặp tên và giá trị
localStorage.setItem("username", "David");
// Nhận về giá trị dữ liệu lưu trữ đã tạo
document.getElementById("result").innerHTML = localStorage.getItem("username");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
</body>
</html>
+ B3 : Xoá dữ liệu trữ của LocalStorage
Nguyên nhân, Do Đối tượng LocalStorage lưu trữ dữ liệu không có ngày hết hạn. Nên chúng ta cần xoá dữ liệu này khi cần, và bạn có thể sử dụng lệnh sau đây để xoá:
localStorage.removeItem(“username”);
EXAMPLE 2: Tạo bộ đếm cho Website
+ Ví dụ sau đếm số lần người dùng Click Like.
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) +1 ;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Like " + localStorage.clickcount;
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p>
<button onclick="clickCounter()" type="button"> Like !</button></p>
<div id="result"></div>
<p>Hãy đóng cửa sổ trình duyệt, và thử lại, và số lần bạn Like vẫn giữ nguyên (Nó không bị Reset).</p>
</body>
</html>
2 ] Sử dụng SessionStorage Object
Đối tượng SessionStorage cho phép lưu trữ dữ liệu trong một phiên làm việc. Dữ liệu sẽ bị xóa khi người dùng đóng tab trình duyệt cụ thể.
Ví dụ sau đếm số lần người dùng đã like trong phiên hiện tại !
EXAMPLE ::
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number( sessionStorage.clickcount ) +1 ;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Like " + sessionStorage.clickcount;
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p>
<button onclick="clickCounter()" type="button"> Like !</button></p>
<div id="result"></div>
<p>Hãy đóng cửa sổ trình duyệt, và thử lại, và số lần bạn Like sẽ bị Reset. Vì đã hết phiên làm việc hiện tại.</p>
</body>
</html>
Như vậy, bạn đã thấy cách làm việc của HTML Web Storage API khá đơn giản. Nó đã đem lại một mặt mạnh cho Lập trình đó là lưu trữ dữ liệu phía người dùng và cho phép cải thiện hiệu suất. Trong một số bài toán thì việc sử dụng HTML Web Storage API đem lại một hướng mới tương đối tốt. Tuỳ thuộc vào việc bạn đưa ra hướng phát triển.
+ Tuy nhiên, bạn cũng có thể lựa chọn nhiều ngôn ngữ khác
