LocalStore.md

id	LocalStore
module	common/data
export	LocalStore
inherits	ArrayStore

---

shortDescription

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.

lib

dx.web.js, dx.viz.js, dx.all.js

---

When configuring the LocalStore, specify the name under which data should be saved in the browser's localStorage object.

---

jQuery

<!--JavaScript-->
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

<!--TypeScript-->
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
        });
    }
}

Vue

<!-- tab: App.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

<!-- tab: App.js -->
// ...
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;

---

#include datalayer-store-note-immutable with { name: "LocalStore" }

#####See Also#####

• DataSource API Reference
• Data Layer