RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/ApiReference/Data_Layer/LocalStore/ below:

DevExtreme Vue - 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
        });
    }
}

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;

The

LocalStore

is immutable. You cannot change its configuration at runtime. However, you can use its

methods

to manipulate it.