Lưu trữ cục bộ trong HTML5: Local Storage và Session Storage

02:00 ngày 11-09-2017

Ngoài Cookies, HTML5 cung cấp phương thức lưu trữ mới bên phía giao diện người dùng gọi là HTML Local Storage. Chúng được bảo mật và lưu trữ được dữ liệu lớn hơn (it nhất là 5MB)

HTML5 cung cấp 2 phương thức lưu trữ mới ở phía giao diện người dùng đó là Local Storage và Session Storage. Chúng được gọi là HTML Local Storage.
- Local Storage: Dữ liệu được lưu trữ mãi mãi.
- Session Storage: Dữ liệu chỉ được lưu trữ và sử dụng cho một session của page. Việc mở trang web với new tab hoặc window, session mới sẽ được tạo ra.
Khác với Cookies, những thông tin này không được truyền đến Server. HTML Local Storage được lưu trữ dựa trên Origin (cùng protocol <http, https..>, domain và port). Nghĩa là những trang web với cùng Origin sẽ truy cập cùng HTML Local Storage.


Dữ liệu được lưu trữ dưới dạng key, value. Kiểu dữ liệu ở đây là string, vì vậy bạn cần convert đến dữ liệu bạn cần trước khi dùng. Các phương thức quan trọng:
- setItem(key, value) : lưu giá trị
- getItem(key) : Nhận giá trị
- removeItem(key) : Xóa phần tử
- clear() : Xóa tất cả các phần tử


Giờ hãy thử cách thức hoạt động của chúng. Trước tiên, copy đoạn mã sau vào file test1.html

<!DOCTYPE html>
<html>
<head>
<script>
function clickCount() {
   if(typeof(Storage) !== "undefined") {
        var storageObject = localStorage;
        if (storageObject.clickcount) {
            storageObject.clickcount = Number(storageObject.clickcount)+1;
        } else {
            storageObject.clickcount = 1;
        }
        document.getElementById("result").innerHTML = storageObject.clickcount + " time(s).";
    } else {
        document.getElementById("result").innerHTML = "Not support web storage...";
    }
}

function inital() {
   if(typeof(Storage) !== "undefined") {
        var storageObject = localStorage;
        if (storageObject.clickcount) {
            storageObject.clickcount = Number(storageObject.clickcount);
        } else {
            storageObject.clickcount = 0;
        }
        document.getElementById("result").innerHTML = storageObject.clickcount + " time(s).";
    } else {
        document.getElementById("result").innerHTML = "Not support web storage...";
    }
}
</script>
</head>
<body onload="inital()">
<p>HTML Local Storage Demo</p>
<p><button onclick="clickCount()" type="button">Click!</button></p>
<div id="result"></div>
</body>
</html>


Giờ chạy file này trên trình duyệt. Click trên button Click. Giá trị sẽ tăng lên. Hãy tắt và mở lại, lúc này số lần click vẫn tiếp tục hiển thị. Nếu chúng ta mở tiếp tab nữa thì giá trị hiển thị giống nhau. Đó là bởi vì Local Storage sẽ được lưu trữ mãi mãi (cho đến khi chúng ta xóa) và dựa trên Origin nên nếu chúng ta đóng trình duyệt và mở lại hay mở một tab mới thì thông tin lưu trữ vẫn còn và được dùng chung.

Bây giờ hãy thay đổi localStorage thành sessionStorage bằng cách sửa var storageObject = localStorage; thành var storageObject = sessionStorage; ở trong 2 hàm JavaScript. Hãy thử các trường hợp như đã thực hiện trước. Giá trị luôn luôn bằng không sau khi đóng trình duyệt và mở lại. Hãy thử mở thêm một tab sau khi click vài lần lên button. Lúc này giá trị hiện thị trên tab mới cũng bằng 0. Có cái gì đó không đúng ở đây, thông tin được sử dụng cho cùng Origin. Vậy tại sao cửa sổ mới vẫn bằng 0? Thực ra, Page Session chỉ được tính trên một tab.
A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work. 
Chúng ta hãy thử copy file test1.html đến test2.html. Mở file test1.html, click trên button để thay đổi giá trị. Giờ hãy thay test1.html bằng test2.html trên thanh địa chỉ và enter ( mở test2.html trên tab hiện tại mở test1.html). Giá trị khi nảy vẫn còn ở đây. Nghĩa là test1.html và test2.html đang đọc cùng thông tin lưu trữ khi mở chúng trên cùng 1 tab.

 

Bài Viết Cùng Chuyên Mục

Base64 và Cache Image trong LocalStorage

Base64 và Cache Image trong LocalStorage

Base64 là một chuẩn mã hóa sử dụng các chuỗi ký tự với một bảng mã gồm 6 bit. Base64 thường được sử dụng để mã hóa các tập tin đa phương tiện âm thanh, hình ảnh và video

PerformanceNavigation và cách thức truy cập Website (Page)

PerformanceNavigation và cách thức truy cập Website (Page)

Trong quá trình xây dựng Website, đôi khi chúng ta cần xác định cách mà một Page được truy cập: Mở từ thanh địa chỉ của trình duyệt, từ history hay Page được Reload,...

HTML5 Web Workers là gì

HTML5 Web Workers là gì

Một Web Worker là một chương trình JavaScript chạy trong background. Vì vậy, Web Worker sẽ không làm treo web khi chạy, nó sẽ không tác động đến hiệu suất của Website

Angular Tree

Angular Tree

Angular Tree là một AngularJS UI component. Angular Tree có thể sort nested lists, hổ trợ drag & drop và không phụ thuộc vào JQuery

Phản Hồi

Viết Phản Hồi

Reload

Chuyên Mục

Bài Viết Mới

Phản Hồi Mới