DevExtreme jQuery - LocalStore Options

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:

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

key

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

Type:

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:

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 parameters:

values:

The added data item.

key:

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 parameters:

values:

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, 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({
    // ...
    onInserting: function (values, key) {
        // 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 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 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:

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:

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 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 parameters:

key:

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 parameters:

key:

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 parameters:

key:

The updated data item's key.

values:

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 parameters:

key:

The key of the data item to be updated.

values: