Web storage và Web SQL trong HTML5

HTML 5 đã giới thiệu về web storage, giúp client code (Javascript) lưu thông tin với dung lượng lớn hơn hơn an toàn hơn so với cookie, đồng thời không làm ảnh hưởng đến performance của trang web.

Web storage gồm có LocalStorage và SessionStorage được lưu theo từng domain, được hỗ trợ bởi hầu hết các browser hiện đại

localStorage là một biến có thể set và get như bình thường

localStorage.setItem('name', 'foo');
localStorage.getItem('name'); // foo

Chúng ta thậm chí có thể lưu và lấy thông tin dưới dạng Object và Json

localStorage.setItem('user', JSON.stringify({
    name: 'foo',
    id: 'bar'
}));
var user = JSON.parse(localStorage.getItem('user'));
// Object {name: "foo", id: "bar"}

Xoá thông tin cũng rất dễ với removeItem và clear

localStorage.removeItem('user')
var user = JSON.parse(localStorage.getItem('user')); // null
localStorage.clear() // Clear all

sessionStorage cũng giống localStorage, chỉ khác ở chỗ là chỉ lưu thông tin trên một session, tức là thông tin sẽ mất khi user đóng browse lại.

HTML5 cũng giới thiệu một phương pháp tạo database trên client code.
Ngữ pháp dùng trên Web SQL rất giống với SQLite và MySQL.

var db = openDatabase('mydb', '1.0', 'my first database', 2 * 1024 * 1024);
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE user (name unique, address)');
  tx.executeSql('INSERT INTO user (name, address) VALUES ("foo", "HN")')
});
db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM user', [], function (tx, results) {
    var len = results.rows.length, i;
    for (i = 0; i < len; i++) {
      console.log(results.rows.item(i));
    }
  });
});
// Object {name: "foo", address: "HN"}