如何将对象存储在localStorage中？

Question

我正在尝试从本地存储中设置和获取项目，但是当我记录数据时，我得到了 [object Object]。

我正在尝试获取该对象的视图，类似于这样 {a:v,b:v} ...

这是代码：

var widgets = localStorage.getItem('widgets');
        if (widgets == null) {
         widgets = {
            widget_lot : '',
            widget_td : '',
            widget_cwo : '',
            widget_vehicles : '',
            widget_take : ''
            };  

            widgets.widget_lot = 0;
            widgets.widget_td = 0;
            widgets.widget_cwo = 1;
            widgets.widget_vehicles = 0;
            widgets.widget_take = 0;

            localStorage.setItem('widgets', widgets);
        }

        console.log(widgets); //Logs "[object Object]"

- zinho

Answer 1

本地存储仅支持string数据类型。因此在保存到本地存储之前，您需要将其转换为字符串。

1. 将其转换为字符串后再保存到LocalStorage

localStorage.setItem('key', JSON.stringify(data));

从LocalStorage读取并转换回JS对象

data = JSON.parse(localStorage.getItem('key')); //forgot to close

如果是针对您的代码，应该是 -

var widgets = JSON.parse(localStorage.getItem('widgets'));

以及

localStorage.setItem('widgets', JSON.stringify(widgets));

- brainless coder

---

谢谢，伙计，运行得很好。我一直在尝试调整JSON，但是遇到了意外的令牌o错误...删除了本地存储并重新保存数据，现在它可以工作了。再次感谢。 - zinho

不用谢。请确保将答案标记为已采纳。如果有人需要相同的帮助，这会很有帮助... :) - brainless coder

一个来自2021年的小伙子感谢你。@brainlesscoder - Chandler Bing

Answer 2

你需要将对象转换为字符串后再存储到存储器中，例如：

localStorage.setItem('widgets', JSON.stringify(widgets));

"localStorage 存储的值是字符串，因此当您尝试将一个对象保存到其中时，会调用该值的 toString() 方法，由于您有一个对象，它会返回 [object Object]。

同样，getItem() 返回一个字符串，要将其转换为对象，请使用 JSON.parse()。

所以，"

var widgets = localStorage.getItem('widgets');
console.log('stored', widgets)
if (widgets == null) {
    widgets = {
        widget_lot: '',
        widget_td: '',
        widget_cwo: '',
        widget_vehicles: '',
        widget_take: ''
    };

    widgets.widget_lot = 0;
    widgets.widget_td = 0;
    widgets.widget_cwo = 1;
    widgets.widget_vehicles = 0;
    widgets.widget_take = 0;

    localStorage.setItem('widgets', JSON.stringify(widgets));
} else {
    widgets = JSON.parse(widgets)
}

console.log(widgets); //Logs "[object Object]"

演示：Fiddle

- Arun P Johny