DevExtreme React - LocalStore Props

This section describes properties that configure the LocalStore.

data

Specifies the store's associated array.

Type:

Array<any>

jQuery
JavaScript
var store = new DevExpress.data.LocalStore({
    data: [
        { id: 1, name: "John Doe" },
        // ...
    ]
});
Angular
TypeScript
import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            data: [
                { id: 1, name: "John Doe" },
                // ...
            ]
        })
    }
}
Vue
App.vue
<script>
import ArrayStore from 'devextreme/data/array_store';

const store = new ArrayStore({
    data: [
        { id: 1, name: 'John Doe' },
        // ...
    ]
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
// ...
import ArrayStore from 'devextreme/data/array_store';

const store = new ArrayStore({
    data: [
        { id: 1, name: 'John Doe' },
        // ...
    ]
});

class App extends React.Component {
    // ...
}
export default App;

errorHandler

Specifies the function that is executed when the store throws an error.

Type:

Function

This function accepts a JavaScript Error object as the parameter.

jQuery
JavaScript
var store = new DevExpress.data.LocalStore({
    // ...
    errorHandler: function (error) {
        console.log(error.message);
    }
});
Angular
TypeScript
import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            // ...
            errorHandler: function (error) {
                console.log(error.message);
            }
        })
    }
}
Vue
App.vue
<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    errorHandler: (error) => {
        console.log(error.message);
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    errorHandler: (error) => {
        console.log(error.message);
    }
});

class App extends React.Component {
    // ...
}
export default App;

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.

Type:

Number

Default Value: 10000

jQuery
JavaScript
var store = new DevExpress.data.LocalStore({
    // ...
    immediate: false,
    flushInterval: 3000
});
Angular
TypeScript
import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            // ...
            immediate: false,
            flushInterval: 3000
        })
    }
}
Vue
App.vue
<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    immediate: false,
    flushInterval: 3000
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    immediate: false,
    flushInterval: 3000
});

class App extends React.Component {
    // ...
}
export default App;

immediate

Specifies whether the LocalStore saves changes in the local storage immediately.

Type:

Boolean

Default Value: false

See Also

key

Specifies the key property (or properties) that provide(s) key values to access data items. Each key value must be unique.

Type:

String

|

Array<String>

In the following example, the ProductID and ProductCode properties are specified as key properties:

jQuery
JavaScript
var store = new DevExpress.data.LocalStore({
    // ...
    key: ["ProductID", "ProductCode"]
});
Angular
TypeScript
import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            // ...
            key: ["ProductID", "ProductCode"]
        })
    }
}
Vue
App.vue
<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    key: ['ProductID', 'ProductCode']
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    key: ['ProductID', 'ProductCode']
});

class App extends React.Component {
    // ...
}
export default App;

name

Specifies the name under which data should be saved in the local storage. The dx-data-localStore- prefix will be added to the name.

Type:

String

jQuery
JavaScript
var store = new DevExpress.data.LocalStore({
    // ...
    name: "myStore"
});
Angular
TypeScript
import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            // ...
            name: "myStore"
        })
    }
}
Vue
App.vue
<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    name: 'myStore'
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    name: 'myStore'
});

class App extends React.Component {
    // ...
}
export default App;

onInserted

A function that is executed after a data item is added to the store.

Type:

Function

Function parameters:
values:

Object

The added data item.

key:

Object

|

String

|

Number

The item's key.

jQuery
JavaScript
var store = new DevExpress.data.LocalStore({
    onInserted: function (values, key) {
        // Your code goes here
    }
});
Angular
TypeScript
import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            onInserted: function (values, key) {
                // Your code goes here
            }
        })
    }
}
Vue
App.vue
<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onInserted: function (values, key) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onInserted: function (values, key) {
        // Your code goes here
    }
});

class App extends React.Component {
    // ...
}
export default App;

onInserting

A function that is executed before a data item is added to the store.

Type:

Function

Function parameters:
values:

Object

The data item to be added.

jQuery
JavaScript
var store = new DevExpress.data.LocalStore({
    onInserting: function (values) {
        // Your code goes here
    }
});
Angular
TypeScript
import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            onInserting: function (values) {
                // Your code goes here
            }
        })
    }
}
Vue
App.vue
<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onInserting: function (values) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onInserting: function (values) {
        // Your code goes here
    }
});

class App extends React.Component {
    // ...
}
export default App;

onLoaded

A function that is executed after data is loaded to the store.

Type:

Function

Function parameters:
result:

Array<any>

The loaded data.

jQuery
JavaScript
var store = new DevExpress.data.LocalStore({
    onLoaded: function (result) {
        // Your code goes here
    }
});
Angular
TypeScript
import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            onLoaded: function (result) {
                // Your code goes here
            }
        })
    }
}
Vue
App.vue
<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onLoaded: function (result) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onLoaded: function (result) {
        // Your code goes here
    }
});

class App extends React.Component {
    // ...
}
export default App;

onLoading

A function that is executed before data is loaded to the store.

Type:

Function

Function parameters:
loadOptions:

LoadOptions

Data processing settings.

jQuery
JavaScript
var store = new DevExpress.data.LocalStore({
    onLoading: function (loadOptions) {
        // Your code goes here
    }
});
Angular
TypeScript
import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            onLoading: function (loadOptions) {
                // Your code goes here
            }
        })
    }
}
Vue
App.vue
<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onLoading: function (loadOptions) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onLoading: function (loadOptions) {
        // Your code goes here
    }
});

class App extends React.Component {
    // ...
}
export default App;

onModified

A function that is executed after a data item is added, updated, or removed from the store.

Type:

Function

jQuery
JavaScript
var store = new DevExpress.data.LocalStore({
    onModified: function () {
        // Your code goes here
    }
});
Angular
TypeScript
import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            onModified: function () {
                // Your code goes here
            }
        })
    }
}
Vue
App.vue
<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onModified: function () {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onModified: function () {
        // Your code goes here
    }
});

class App extends React.Component {
    // ...
}
export default App;

onModifying

A function that is executed before a data item is added, updated, or removed from the store.

Type:

Function

jQuery
JavaScript
var store = new DevExpress.data.LocalStore({
    onModifying: function () {
        // Your code goes here
    }
});
Angular
TypeScript
import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            onModifying: function () {
                // Your code goes here
            }
        })
    }
}
Vue
App.vue
<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onModifying: function () {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onModifying: function () {
        // Your code goes here
    }
});

class App extends React.Component {
    // ...
}
export default App;

onPush

The function executed before changes are pushed to the store.

Type:

Function

Function parameters:
changes:

Array<any>

Changes passed in the push(changes) method.

jQuery
JavaScript
var store = new DevExpress.data.LocalStore({
    onPush: function(changes) {
        // Your code goes here
    }
});
Angular
TypeScript
import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            onPush: (changes) => {
                // Your code goes here
            }
        })
    }
}
Vue
App.vue
<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onPush: (changes) => {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onPush: (changes) => {
        // Your code goes here
    }
});

class App extends React.Component {
    // ...
}
export default App;

onRemoved

A function that is executed after a data item is removed from the store.

Type:

Function

Function parameters:
key:

Object

|

String

|

Number

The removed data item's key.

jQuery
JavaScript
var store = new DevExpress.data.LocalStore({
    onRemoved: function (key) {
        // Your code goes here
    }
});
Angular
TypeScript
import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            onRemoved: function (key) {
                // Your code goes here
            }
        })
    }
}
Vue
App.vue
<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onRemoved: function (key) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onRemoved: function (key) {
        // Your code goes here
    }
});

class App extends React.Component {
    // ...
}
export default App;

onRemoving

A function that is executed before a data item is removed from the store.

Type:

Function

Function parameters:
key:

Object

|

String

|

Number

The key of the data item to be removed.

jQuery
JavaScript
var store = new DevExpress.data.LocalStore({
    onRemoving: function (key) {
        // Your code goes here
    }
});
Angular
TypeScript
import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            onRemoving: function (key) {
                // Your code goes here
            }
        })
    }
}
Vue
App.vue
<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onRemoving: function (key) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onRemoving: function (key) {
        // Your code goes here
    }
});

class App extends React.Component {
    // ...
}
export default App;

onUpdated

A function that is executed after a data item is updated in the store.

Type:

Function

Function parameters:
key:

Object

|

String

|

Number

The updated data item's key.

values:

Object

Updated values.

jQuery
JavaScript
var store = new DevExpress.data.LocalStore({
    onUpdated: function (key, values) {
        // Your code goes here
    }
});
Angular
TypeScript
import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            onUpdated: function (key, values) {
                // Your code goes here
            }
        })
    }
}
Vue
App.vue
<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onUpdated: function (key, values) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onUpdated: function (key, values) {
        // Your code goes here
    }
});

class App extends React.Component {
    // ...
}
export default App;

onUpdating

A function that is executed before a data item is updated in the store.

Type:

Function

Function parameters:
key:

Object

|

String

|

Number

The key of the data item to be updated.

values:

Object

New values for the data item fields.

jQuery
JavaScript
var store = new DevExpress.data.LocalStore({
    onUpdating: function (key, values) {
        // Your code goes here
    }
});
Angular
TypeScript
import LocalStore from "devextreme/data/local_store";
// ...
export class AppComponent {
    store: LocalStore;
    constructor() {
        this.store = new LocalStore({
            onUpdating: function (key, values) {
                // Your code goes here
            }
        })
    }
}
Vue
App.vue
<script>
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onUpdating: function (key, values) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
// ...
import LocalStore from 'devextreme/data/local_store';

const store = new LocalStore({
    // ...
    onUpdating: function (key, values) {
        // Your code goes here
    }
});

class App extends React.Component {
    // ...
}
export default App;