Одной из интересных функций, которые включает библиотека datajs, является API хранилища, который абстрагирует использование механизмов хранения на стороне клиента. Вы можете использовать API хранилища, чтобы иметь уровень хранения на стороне клиента и, следовательно, уменьшить количество обращений к серверу. Поскольку datajs только в альфа-версии, этот API может измениться в будущем, но даже в этом случае я объясню и покажу, как использовать его в этой статье.
Опции хранения datajs
В настоящее время datajs предоставляет уровень абстракции поверх следующих трех вариантов хранения на стороне клиента:
- In-memory — команда datajs реализовала механизм хранения в памяти, который можно использовать с библиотекой datajs.
- DOM Storage — я писал об этом типе хранилища клиента в прошлом. Большинство новых браузеров (IE, Chrome, Firefox, Opera и другие) включают реализацию для DOM Storage, который представляет собой словарь значений ключей, который существует на стороне клиента.
- IndexedDB — это новая спецификация HTML5 , которая разрабатывается в наши дни и поэтому является только экспериментальной. Большинство браузеров еще не реализовали эту функцию. Несмотря на это, команда datajs изучает эту опцию, и когда браузеры предоставят реализацию IndexedDB, вы сможете использовать ее через datajs.
API хранилища datajs
Первое, что вы захотите сделать, когда используете API хранилища, — это создать объект хранилища. Для этого вам нужно вызвать функцию createStore. Функция получает два параметра — имя хранилища и используемый механизм. Параметр механизм является необязательным и может получить одну из следующих опций:
- лучше всего — datajs будет использовать современный API, который существует в браузере пользователя. Это значение по умолчанию, поэтому, если вы не предоставите значение для параметра механизма, datajs выберет лучший вариант для вас.
- memory — datajs будет использовать реализацию в памяти, предоставленную в библиотеке.
- dom — datajs будет использовать реализацию Dom Storage.
- indexeddb — datajs будет использовать реализацию IndexedDB.
Вот пример создания нового объекта хранилища, использующего Dom Storage:
var store = datajs.createStore('MyStorage', 'dom');
После создания объекта хранилища вы можете начать использовать API хранилища. API включает в себя множество простых функций, таких как добавление, удаление, обновление, поиск и многое другое. Для дальнейшего чтения об этих методах перейдите на страницу API магазина . Одна из вещей, которые вы заметите в API, заключается в том, что все функции API работают асинхронно (они получают сообщения об ошибках и об ошибках).
Пример API хранилища datajs
Давайте посмотрим на простой пример:
<!DOCTYPE html>
<html>
<head runat="server">
<title>datajs Example</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js" type="text/javascript"></script>
<script src="Scripts/datajs-0.0.3.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1">
<div>
Insert data into drop down list. The data is saved into datajs storage.
<div>
<input type="text" id="data" /><input type="button" id="btnInsert" value="Save" />
</div>
<div>
<select id="storedData">
</select>
</div>
</div>
<script type="text/javascript">
var store;
$(document).ready(function () {
store = datajs.createStore("MyStorage");
$("#btnInsert").click(function () {
var insertedValue = $("#data").val();
store.add(insertedValue, insertedValue,
function (key, value) {
$(document.createElement("option")).val(value).text(key).appendTo($("#storedData"));
}, function (error) {
alert(error.message);
});
});
})
</script>
</form>
</body>
</html>
Давайте рассмотрим пример. Прежде всего вы можете видеть, что я использую jQuery вместе с datajs. datajs — это библиотека, которая фокусируется на обработке данных, которая дополняет то, что делает jQuery. Таким образом, вы можете использовать jQuery, datajs или оба в одном приложении. В этом примере я создал простую страницу, которая вставляет данные из текстового поля в раскрывающийся список. В качестве побочного эффекта данные также сохраняются в хранилище на стороне клиента. В коде JavaScript я сначала создаю хранилище с помощью функции createStore. Поскольку я не предоставляю механизм в качестве второго параметра, datajs будет использовать лучший механизм, который существует в моем браузере. Затем я подключаю событие click для кнопки вставки. Событие извлечет значение из текстового поля и вставит его в созданное хранилище datajs с помощью функции add.После успешной вставки будет вызвана функция обратного вызова, которая вставит данные в раскрывающийся список. Если происходит ошибка, обратный вызов ошибки предупредит пользователя об ошибке.
Резюме
В этом посте я познакомил вас с API хранилища datajs. Если вас это интересует, команда datajs ищет отзывы о своих решениях. Некоторые из их вопросов написаны на странице API магазина .