DevExtreme jQuery - LocalStore API
The LocalStore is a store that provides an interface for loading and editing data from HTML Web Storage (also known as window.localStorage) and handling related events.
When configuring the LocalStore, specify the name under which data should be saved in the browser's localStorage object.
jQuery
var states = [
{ id: 1, state: "Alabama", capital: "Montgomery" },
{ id: 2, state: "Alaska", capital: "Juneau" },
{ id: 3, state: "Arizona", capital: "Phoenix" },
// ...
];
var store = new DevExpress.data.LocalStore({
key: "id",
data: states,
name: "myLocalData",
// Other LocalStore properties go here
});
// ===== or inside the DataSource =====
var dataSource = new DevExpress.data.DataSource({
store: {
type: "local",
key: "id",
data: states,
name: "myLocalData",
// Other LocalStore properties go here
},
// Other DataSource properties go here
});Angular
import LocalStore from "devextreme/data/local_store";
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
store: LocalStore;
dataSource: DataSource;
states = [
{ id: 1, state: "Alabama", capital: "Montgomery" },
{ id: 2, state: "Alaska", capital: "Juneau" },
{ id: 3, state: "Arizona", capital: "Phoenix" },
// ...
];
constructor () {
this.store = new LocalStore({
key: "id",
data: this.states,
name: "myLocalData",
// Other LocalStore properties go here
});
// ===== or inside the DataSource =====
this.dataSource = new DataSource({
store: new LocalStore({
key: "id",
data: this.states,
name: "myLocalData",
// Other LocalStore properties go here
}),
// Other DataSource properties go here
});
}
}AngularJS
angular.module('DemoApp', ['dx'])
.controller('DemoController', function DemoController($scope) {
var states = [
{ id: 1, state: "Alabama", capital: "Montgomery" },
{ id: 2, state: "Alaska", capital: "Juneau" },
{ id: 3, state: "Arizona", capital: "Phoenix" },
// ...
];
$scope.store = new DevExpress.data.LocalStore({
key: "id",
data: states,
name: "myLocalData",
// Other LocalStore properties go here
});
// ===== or inside the DataSource =====
$scope.dataSource = new DevExpress.data.DataSource({
store: {
type: "local",
key: "id",
data: states,
name: "myLocalData",
// Other LocalStore properties go here
},
// Other DataSource properties go here
});
});Knockout
var states = [
{ id: 1, state: "Alabama", capital: "Montgomery" },
{ id: 2, state: "Alaska", capital: "Juneau" },
{ id: 3, state: "Arizona", capital: "Phoenix" },
// ...
];
var viewModel = {
store: new DevExpress.data.LocalStore({
key: "id",
data: states,
name: "myLocalData",
// Other LocalStore properties go here
})
// ===== or inside the DataSource =====
dataSource: new DevExpress.data.DataSource({
store: {
type: "local",
key: "id",
data: states,
name: "myLocalData",
// Other LocalStore properties go here
},
// Other DataSource properties go here
})
};
ko.applyBindings(viewModel);Vue
<script>
import LocalStore from 'devextreme/data/local_store';
import DataSource from 'devextreme/data/data_source';
const states = [
{ id: 1, state: 'Alabama', capital: 'Montgomery' },
{ id: 2, state: 'Alaska', capital: 'Juneau' },
{ id: 3, state: 'Arizona', capital: 'Phoenix' },
// ...
];
const store = new LocalStore({
key: 'id',
data: states,
name: 'myLocalData',
// Other LocalStore properties go here
});
// ===== or inside the DataSource =====
const dataSource = new DataSource({
store: new LocalStore({
key: 'id',
data: states,
name: 'myLocalData',
// Other LocalStore properties go here
}),
// Other DataSource properties go here
});
export default {
// ...
data() {
return {
store,
// ===== or =====
dataSource
}
}
}
</script>React
// ...
import LocalStore from 'devextreme/data/local_store';
import DataSource from 'devextreme/data/data_source';
const states = [
{ id: 1, state: 'Alabama', capital: 'Montgomery' },
{ id: 2, state: 'Alaska', capital: 'Juneau' },
{ id: 3, state: 'Arizona', capital: 'Phoenix' },
// ...
];
const store = new LocalStore({
key: 'id',
data: states,
name: 'myLocalData',
// Other LocalStore properties go here
});
// ===== or inside the DataSource =====
const dataSource = new DataSource({
store: new LocalStore({
key: 'id',
data: states,
name: 'myLocalData',
// Other LocalStore properties go here
}),
// Other DataSource properties go here
});
class App extends React.Component {
// ...
}
export default App;See Also
Options
| Name | Description |
|---|---|
| data |
Specifies the store's associated array. |
| errorHandler |
Specifies the function that is executed when the store throws an error. |
| flushInterval |
Specifies a delay in milliseconds between when data changes and the moment these changes are saved in the local storage. Applies only if immediate is false. |
| immediate |
Specifies whether the LocalStore saves changes in the local storage immediately. |
| key |
Specifies the key property (or properties) that provide(s) key values to access data items. Each key value must be unique. |
| name |
Specifies the name under which data should be saved in the local storage. The |
| onInserted |
A function that is executed after a data item is added to the store. |
| onInserting |
A function that is executed before a data item is added to the store. |
| onLoaded |
A function that is executed after data is loaded to the store. |
| onLoading |
A function that is executed before data is loaded to the store. |
| onModified |
A function that is executed after a data item is added, updated, or removed from the store. |
| onModifying |
A function that is executed before a data item is added, updated, or removed from the store. |
| onPush |
The function executed before changes are pushed to the store. |
| onRemoved |
A function that is executed after a data item is removed from the store. |
| onRemoving |
A function that is executed before a data item is removed from the store. |
| onUpdated |
A function that is executed after a data item is updated in the store. |
| onUpdating |
A function that is executed before a data item is updated in the store. |
Methods
| Name | Description |
|---|---|
| byKey(key) |
Gets a data item with a specific key. |
| clear() |
Removes data from the local storage. |
| createQuery() |
Creates a Query for the underlying array. |
| insert(values) |
Adds a data item to the store. |
| key() |
Gets the key property (or properties) as specified in the key property. |
| keyOf(obj) |
Gets a data item's key value. |
| load() |
Starts loading data. |
| load(options) |
Starts loading data. |
| off(eventName) |
Detaches all event handlers from a single event. |
| off(eventName, eventHandler) |
Detaches a particular event handler from a single event. |
| on(eventName, eventHandler) |
Subscribes to an event. |
| on(events) |
Subscribes to events. |
| push(changes) |
Pushes data changes to the store and notifies the DataSource. |
| remove(key) |
Removes a data item with a specific key from the store. |
| totalCount(options) |
Gets the total count of items the load() function returns. |
| update(key, values) |
Updates a data item with a specific key. |
Events
| Name | Description |
|---|---|
| inserted |
Raised after a data item is added to the store. |
| inserting |
Raised before a data item is added to the store. |
| loaded |
Raised after data is loaded to the store. |
| loading |
Raised before data is loaded to the store. |
| modified |
Raised after a data item is added, updated, or removed from the store. |
| modifying |
Raised before a data item is added, updated, or removed from the store. |
| push |
Raised before changes are pushed to the store. |
| removed |
Raised after a data item is removed from the store. |
| removing |
Raised before a data item is removed from the store. |
| updated |
Raised after a data item is updated in the store. |
| updating |
Raised before a data item is updated in the store. |