Web storage và Web SQL trong HTML5
Javascript
247
HTML5
26
White

Phan Hoàng Công viết ngày 27/05/2015

Web Storage

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ó LocalStorageSessionStorage được lưu theo từng domain, được hỗ trợ bởi hầu hết các browser hiện đại

Sử dụng Web Storage

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 removeItemclear

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.

Web SQL

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"}
Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Phan Hoàng Công

6 bài viết.
21 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
31 9
Lang thang thấy một số button rất đẹp trên Codepen nên tổng hợp lại. Các bạn click thẳng vào link tiêu đề để đến codepen nhé. (Link) (Ảnh) (Li...
Phan Hoàng Công viết hơn 2 năm trước
31 9
White
23 4
(Ảnh) Bower là gì Bower là một công cụ quản lý resource cho lập trình frontend được open source bởi Twitter. Đã qua cái thời bạn phải download t...
Phan Hoàng Công viết 3 năm trước
23 4
White
18 6
Hiệu ứng chữ Để tạo ra một website ấn tượng thì design, hay "bộ mặt" của trang web là cực kỳ quan trọng. Trong design nói chung thì tiêu đề, đầu đ...
Phan Hoàng Công viết 3 năm trước
18 6
Bài viết liên quan
White
12 1
Lấy fake path của file trong html input Ngữ cảnh: em cần làm một cái nút tải ảnh lên có preview. GIải pháp đầu: Dùng (Link) đọc file ảnh thành ba...
Hoàng Duy viết 2 năm trước
12 1
White
17 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết hơn 2 năm trước
17 10
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
21 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!