vue.js - 如何在 Vue 中使用 localStorage？

Question

我正在使用简单的 Vue 应用程序来获取数据，然后将其呈现在表格中。现在我创建了一个 OK 按钮，我可以在其中更改一件事是否为完成（类似于 todo 应用程序）。

但是我怎样才能保存更改？

这是我的代码：

declare var Vue: any;
declare var axios: any;

var vm = new Vue({
    el: '#appnew',
    data: {
        message: '',
        status: [],
        id: '',
    },
    created: function () {
        this.loadQuote();
    },
    methods: {
        loadQuote: function () {
            const id = window.location.pathname.split("/").pop();
            this.status = 'Loading...';
            axios.get('path' + id)
                .then(function (response) {
                    vm.status = response.data;
                })
                .catch(function (error) {
                    vm.status = 'An error occured.' + error;
                });
        },
        toggleDone(statu) {
            statu.done = !statu.done
        },
    },
});

在 toggleDone 方法下，我正在更改它是否已完成，所以我想我应该在那里添加以保存更改？使用本地存储？有什么想法吗？

谢谢，如果你能帮助我。

标签： vue.js

Answer 1

是的，你必须将值保存到localStorage，检索它，然后用它做你想做的事：

toggleDone(statu) {
    statu.done = !statu.done
    localStorage.setItem('statu', statu.done);
}

const statu = localStorage.getItem('statu');