module Web tích hợp: Cách sử dụng KV Storage
Việc phát hành KV Storage là một vấn đề lớn đối với nền tảng web. Đó là một phần của Đề xuất Thư viện Chuẩn , có thể thấy một thư viện chuẩn mở rộng hơn đang được giới thiệu cho JavaScript.
Trước khi tìm hiểu về kv-storage , trước tiên hãy thảo luận về cách ta có thể lưu trữ dữ liệu trong trình duyệt. Nếu tôi muốn lưu trữ một số dữ liệu local ngay bây giờ, một trong những lựa chọn chính của tôi sẽ là sử dụng localStorage .
Với ý nghĩ đó, ta hãy tạo một ứng dụng Todo đơn giản với JavaScript để tận dụng localStorage . Ta cần hai file - index.html và main.js :
const TODOS_KEY = 'todos';
const ul = document.getElementsByTagName('ul')[0];
const showExistingTodos = todos => {
if (todos.length > 0) {
todos.map(todo => {
addLi(todo);
});
}
};
const addTodo = () => {
const input = document.getElementById('todoInput').value;
if (input.length > 0) {
addLi(input);
saveTodo(input);
document.getElementById('todoInput').value = '';
}
};
const addLi = text => {
const li = document.createElement('li');
li.appendChild(document.createTextNode(text));
ul.appendChild(li);
};
const saveTodo = todo => {
let loadedTodos = loadTodos();
loadedTodos = [...loadedTodos, todo];
localStorage.setItem(TODOS_KEY, JSON.stringify(loadedTodos));
};
const loadTodos = () => {
const todos = JSON.parse(localStorage.getItem(TODOS_KEY));
return todos != null ? todos : [];
};
const clearTodos = () => {
localStorage.removeItem(TODOS_KEY);
const todos = Array.from(document.getElementsByTagName('li'));
todos.map(todo => ul.removeChild(todo));
};
const todos = loadTodos();
showExistingTodos(todos);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<input id="todoInput" type="text" />
<button onclick="addTodo()">Add Todo</button>
<button onclick="clearTodos()">Clear todos</button>
</div>
<ul>
</ul>
<script src="main.js"></script>
</body>
</html>
Mặc dù điều này chắc chắn có thể được cải thiện, nhưng giờ đây ta có một ứng dụng mà ta có thể sử dụng làm ví dụ. Nếu ta thử và thêm một số mục Todo và sau đó làm mới trang, ta sẽ thấy rằng chúng xuất hiện ngay lập tức!
Hmm… Tôi đã thực hiện một số nghiên cứu và phát hiện ra rằng
localStoragelà đồng bộ. Điều đó có ý nghĩa gì đối với ứng dụng của ta ?
Về cơ bản, điều này nghĩa là các lệnh gọi tới localStorage sẽ chặn hiển thị bên trong DOM. Điều này có thể đại diện cho một vấn đề nếu ta có nhiều phần tử trong localStorage và sẽ ảnh hưởng đáng kể đến hiệu suất.
Ta hãy xem một module tích hợp thử nghiệm có tên KV lưu trữ (để lưu trữ khóa / giá trị). Điều này được xây dựng trên IndexedDB, một API lưu trữ không đồng bộ.
Tại sao không sử dụng IndexedDB sau đó?
Việc sử dụng bộ lưu trữ KV cung cấp cho ta một API trực quan hơn, tương tự như localStorage . Ta cũng không cần phải chuyển sang thư viện IndexedDB của bên thứ ba, bây giờ ta có thể sử dụng nó trực tiếp từ bên trong trình duyệt!
KV lưu trữ
Đối với ví dụ này, ta cần bật Tính năng thử nghiệm trong Chrome. Bên trong trình duyệt Chrome của bạn, chuyển đến địa chỉ sau:
Chọn “Đã bật” trên các tính năng của Nền tảng web thử nghiệm: [chrome: // flags / # enable-Experi-test-web-platform-features] (chrome: // flags / # enable-testing-web-platform-features).
Bạn cũng nên sử dụng Chrome Canary cho bất kỳ và tất cả các tính năng Web thử nghiệm / mới. Tôi sẽ sử dụng nó cho ví dụ của ta .
Bây giờ ta cần thực hiện các cập nhật sau:
Bên trong index.html , nhập main.js dưới dạng module :
<script type="module" src="main.js"></script>
Tiếp theo, ta có thể cập nhật hàm saveTodo của saveTodo để sử dụng storage.set() thay vì localStorage.setItem()
const saveTodo = async todo => {
let loadedTodos = await loadTodos();
loadedTodos = [...loadedTodos, todo];
await storage.set(TODOS_KEY, loadedTodos);
};
loadTodos của ta sử dụng storage.get() thay vì localStorage.getItem() :
const loadTodos = async () => {
const todos = await storage.get(TODOS_KEY);
return todos != null ? todos : [];
};
Lưu ý ở đây cách ta xử lý sự không đồng bộ một cách dễ dàng bằng cách sử dụng các hàm async / await .
Cuối cùng, ta có thể cải thiện hàm clearTodos của bạn bằng cách sử dụng storage.delete() thay vì localStorage.removeItem() :
const clearTodos = () => {
storage.delete(TODOS_KEY);
const todos = Array.from(document.getElementsByTagName('li'));
todos.map(todo => ul.removeChild(todo));
};
Ta cũng cần hiển thị chúng với đối tượng window :
window.addTodo = addTodo;
window.clearTodos = clearTodos;
Ứng dụng của ta hiện hoạt động trở lại, nhưng thay vì localStorage nó sử dụng module Web std:kv-storage hợp std:kv-storage . Điều tốt nhất về điều này? Nó sử dụng IndexedDB dưới mui xe!
Phương tiện tất cả mọi thứ này là không đồng bộ (như tham chiếu bởi ta async và await cuộc gọi lời hứa, quá).
Hỗ trợ khách hàng
Điều gì sẽ xảy ra nếu trình duyệt không hỗ trợ kv-storage ? Hiện tại, điều này rất có thể xảy ra. May mắn là có một polyfill có sẵn tại đây: https://github.com/GoogleChromeLabs/kv-storage-polyfill .
Tôi khuyên bạn nên thêm phần này vào ứng dụng của bạn nếu bạn có kế hoạch sử dụng kv-storage trong production ở giai đoạn này.
đọc thêm
Google đã chuẩn bị một bản demo về kv-storage mà bạn có thể thấy thú vị khi đọc. Đây là URL: https://rollup-built-in-modules.glitch.me/
Các tin liên quan
Cách thu thập thông tin một trang web với Scrapy và Python 32019-03-20
Cách cạo các trang web với Beautiful Soup và Python 3
2019-03-20
Cách sử dụng API Web trong Python 3
2019-03-20
Tạo ứng dụng web tiến bộ (PWA) với React
2019-03-02
Tụ điện: Chạy ứng dụng web trên thiết bị di động
2019-02-27
Cách gửi thông báo đẩy web từ ứng dụng Django
2018-10-24
Cách xây dựng ứng dụng web hiện đại để quản lý thông tin khách hàng với Django và React trên Ubuntu 18.04
2018-10-22
Cách cài đặt Django Web Framework trên Ubuntu 18.04
2018-08-06
Cách sử dụng Trình quản lý cảnh báo và Trình xuất hộp đen để giám sát web server của bạn trên Ubuntu 16.04
2018-05-11
Giải pháp Deep Dive: Xây dựng một ứng dụng web khả dụng cao với khả năng xử lý và lưu trữ web bằng cách sử dụng MongoDB và Elk Stack
2018-03-15
