Thứ bảy, ngày 3 tháng 12 năm 2016

HTML5 – Web Storage (DOM Storage)

Ngày đăng: 9/3/2012, 8:39:47AM | Lượt xem: 4,793
Hot!

HTML5 cung cấp một tính năng lưu trữ dữ liệu tại client với dung lượng giới hạn lớn hơn nhiều so với cookie.  Tính năng này được gọi là Web Storage và được chia thành hai đối tượng là localStorage và sessionStorage. Bài viết này sẽ giúp bạn nắm được các kiến thức đầy đủ về sử dụng hai đối tượng này trong việc lập trình web.

Web_Database_StorageHTML5 cung cấp một tính năng lưu trữ dữ liệu tại client với dung lượng giới hạn lớn hơn nhiều so với cookie.  Tính năng này được gọi là Web Storage và được chia thành hai đối tượng là localStoragesessionStorage. Bài viết này sẽ giúp bạn nắm được các kiến thức đầy đủ về sử dụng hai đối tượng này trong việc lập trình web.

Giới thiệu

Hiện nay, mỗi cookie chỉ cho phép lưu trữ tối đa 4KB và vài chục cookie cho một domain. Vì thế cookie chỉ được dùng để lưu trữ những thông tin đơn giản và ngắn gọn như email, username, … giúp người dùng đăng nhập tự động vào trang web. Điều này khiến cho những trang web muốn nâng cao hiệu suất làm việc bằng cách cache dữ liệu tại client hầu như không thể thực hiện được.

Sự xuất hiện của Web Storage là một điểm nhấn cho việc ra đời các ứng dụng web có khả năng tương tác và nạp dữ liệu tức thì trên trình duyệt. Một hiệu quả nữa là dung lương truyền tải qua mạng có thể được giảm thiểu đáng kể. Ví dụ một ứng dụng tra cứu sách trực tuyến, các sách đã được tra sẽ được lưu lại trên máy của người dùng. Khi cần tra lại, máy người dùng sẽ không cần kết nối đến server để tải lại những dữ liệu cũ.

Với những ứng dụng web có cơ sở dữ liệu nhỏ gọn, lập trình viên có thể thực hiện việc cache “âm thầm” cơ sở dữ liệu xuống client và sau đó người dùng có thể thoải mái tra cứu mà không cần request đến server.

Web Storage Support Test

Bảng sau được rút gọn từ trang: http://dev-test.nemikor.com/web-storage/support-test/

Browser

localStorage

sessionStorage

Chrome 5.0 2.49 M unlimited
Chrome 6.0 2.49 M 2.49 M
Firefox 3.0 none unlimited
Firefox 3.5 4.98 M unlimited
IE 7.0 none none
IE 8.0 4.75 M 4.75 M
IE Platform Preview 10.0 4.75 M 4.75 M
IEMobile 7.0 none none
Opera 10.54 none none
Opera 10.63 unlimited 4.92 M
Opera 11.00 380 k 504 k
Opera 11.51 unlimited 4.92 M
Opera 11.52 7.42 M 4.92 M
Opera 11.60 1.85 M 4.92 M
Opera 11.61 unlimited 4.86 M
Opera Mini 5.18741 none none
Opera Mobile 11.00 unlimited 504 k
Opera Tablet 11.50 380 k 504 k
Safari 2.49 M unlimited
Safari 4.0 unlimited unlimited
Safari 4.1 none none
Safari 5.0 2.49 M unlimited

Interface Storage

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter creator void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

Như bạn thấy, các dữ liệu lưu trữ trong Storage chỉ là kiểu chuỗi, với các loại dữ liệu khác số nguyên, số thực, bool, … bạn cần phải thực hiện chuyển đối kiểu. Mỗi đối tượng Storage là một danh sách các cặp key/value, đối tượng này bao gồm các thuộc tính và phương thức:

-       length: số lượng cặp key/value có trong đối tượng.

-       key(n): trả về tên của key thứ n trong danh sách.

-       getItem(key): trả về value được gắn với key.

-      setItem(key,value): thêm hoặc gán một cặp key/value vào danh sách.

-      removeItem(key): xóa cặp key/value khỏi danh sách.

-      clear: xóa toàn bộ dữ liệu trong danh sách.

Bên cạnh đó, đối tượng Storage còn có thể được truy xuất qua các thuộc tính là các key trong danh sách.

Ví dụ:

localStorage.abc="123";
// equivalent to:
// localStorage.setItem("abc","123");

Local Storage và Session Storage

Hai đối tượng này là được tạo ra từ interface Storage, bạn sử dụng hai đối tượng này trong javascript qua hai biến được tạo sẵn là window.localStorage và window.sessionStorage. Hai lợi ích mà chúng mang lại là:

-      Dễ sử dụng: bạn có thể truy xuất dữ liệu của hai đối tượng này thông qua các thuộc tính hoặc các phương thức. Dữ liệu được lưu trữ theo từng cặp key/value và không cần bất kì công việc khởi tạo hay chuẩn bị nào.

-      Dung lượng lưu trữ lớn: Tùy theo trình duyệt, bạn có thể lưu trữ từ 5MB đến 10MB cho mỗi domain. Theo Wikipedia thì con số này là: 5MB trong Mozilla Firefox, Google Chrome,và Opera, 10MB trong Internet Explorer.

Phạm vi:

-      sessionStorage: giới hạn trong một cửa sổ hoăc thẻ của trình duyệt. Một trang web được mở trong hai thẻ của cùng một trình duyệt cũng không thể truy xuất dữ liệu lẫn nhau. Như vậy, khi bạn đóng trang web thì dữ liệu lưu trong sessionStorage hiện tại cũng bị xóa.

-      localStorage: có thể truy xuất lẫn nhau giữa các cửa sổ trình duyệt. Dữ liệu sẽ được lưu trữ không giới hạn thời gian.

Đối với localStorage:

“Each domain and subdomain has its own separate local storage area. Domains can access the storage areas of subdomains, and subdomains can access the storage areas of parent domains. For example, localStorage['example.com'] is accessible to example.com and any of its subdomains. The subdomainlocalStorage['www.example.com'] is accessible to example.com, but not to other subdomains, such as mail.example.com.”

http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx

Sử dụng

Bạn có thể tạo một tập tin HTML với nội dung phía dưới để chạy trên trình duyệt. Ở đây tôi sử dụng Chrome vì nó cung cấp sẵn cửa sổ xem phần Resources trong Google Chrome Developer Tools (Ctrl + Shift + I). Nội dung của tập tin HTML như sau:

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">

sessionStorage.myVariable="Hello. ";
localStorage.myVariable="Nice to meet you!";

document.write(sessionStorage.myVariable);
document.write(localStorage.myVariable);

</script>

</body>
</html>

Kết quả hiển thị:

Web Storage Example

Trong giao diện xem Resources, bạn có thể mở phần Console để gõ các lệnh javascript tương tác với trang web hiện tại. Ví dụ ở đây tôi thêm các giá trị mới vào trong localStorage và dùng alert() để hiển thị chúng lên.

Chrome Developer Tools Console

Storage event

Đối tượng Window trong javascript cung cấp một event với tên “storage”. Event này được kích hoạt mỗi khi storageArea bị thay đổi.

interface StorageEvent : Event {
  readonly attribute DOMString key;
  readonly attribute DOMString? oldValue;
  readonly attribute DOMString? newValue;
  readonly attribute DOMString url;
  readonly attribute Storage? storageArea;
};

Event này có thể không hoạt động khi bạn xem tập tin HTML ở máy cục bộ và chỉ được kích hoạt ở những cửa sổ/thẻ khác. Tức là khi bạn mở nhiều cửa sổ trình duyệt truy xuất đến cùng domain, nếu bạn thay đổi một đối tượng Storage bên cửa sổ này thì các cửa sổ còn lại sẽ được kích hoạt event “storage”, còn cửa sổ hiện tại sẽ không xảy ra gì cả.

<!DOCTYPE html>
<html>
<body>

<button onclick="changeValue();">Change Value</button>

<script type="text/javascript">
localStorage.clear();
console.log(localStorage);
if (window.addEventListener)
	window.addEventListener('storage', storage_event, false);
else if (window.attachEvent) // IE
	window.attachEvent('onstorage', storage_event, false);

function storage_event(event){
	console.log(event);
}

function changeValue()
{
	localStorage.myValue=Math.random();
}

</script>

</body>
</html>

Các giá trị của đối tượng StorageEvent trong ví dụ trên (đã rút gọn):
Web Storage Event

Thêm các phương thức vào Storage

Các phương thức của Storage có thể không đủ đáp ứng yêu cầu của bạn, vì vậy bạn có thể thêm một vài phương thức mới vào để sử dụng khi cần thiết. Ví dụ tôi sẽ thêm phương thức search() để lọc ra các giá trị chứa từ khóa cần tìm kiếm.

Storage.prototype.search = function(keyword) {
	var array=new Array();
	var re = new RegExp(keyword,"gi");
	for (var i = 0; i < this.length; i++) {
		var value=this.getItem(this.key(i));
		if(value.search(re)>-1)
			array.push(value);
    	}
	return array;
}

Phương thức trên sử dụng biểu thức chính quy để tìm kiếm theo hai tùy chọn “g” (tìm kiếm toàn bộ chuỗi) và “i” (không phân biệt hoa thường). Phương thức string.search() trả về vị trí của kí tự đầu tiên khớp với từ khóa tìm kiếm, ngược lại là -1 nếu không tìm thấy.

Ta có mã nguồn hoàn chỉnh cho ví dụ này:

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">
Storage.prototype.search = function(keyword) {
	var array=new Array();
	var re = new RegExp(keyword,"gi");
	for (var i = 0; i < this.length; i++) {
		var value=this.getItem(this.key(i));
		if(value.search(re)>-1)
			array.push(value);
    }
	return array;
}

localStorage.clear();

localStorage.key1="Abbey";
localStorage.key2="Abbie";
localStorage.key3="Abby";
localStorage.key4="Abe";
localStorage.key5="Abie";
localStorage.key6="Acton";
localStorage.key7="Adair";

document.write(localStorage.search("ab"));

</script>

</body>
</html>

Kết quả:

Abby,Abie,Abbie,Abe,Abbey

Tương với cách này, bạn có thể bổ sung phương thức để lưu trữ các đối tượng JSON hoặc các kiểu dữ liệu khác.

Bổ sung:

- Còn một đối tượng khác là globalStorage nhưng đây không phải là instance của interface Storage. Hiện tại trong các trình duyệt phổ biến thì chỉ có Firefox hỗ trợ đối tượng này.

YinYang’s Programming Blog

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.