Web storage và Web SQL trong HTML5
Javascript
200
HTML5
12
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.
20 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
30 8
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 2 năm trước
30 8
White
22 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 gần 3 năm trước
22 4
White
16 5
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 hơn 2 năm trước
16 5
Bài viết liên quan
White
39 7
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
39 7
White
21 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết hơn 2 năm trước
21 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
20 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á!