使用LocalStorage存取数组对象的时候报错（自问自答）

Question

问题描述

在项目的pos-a处存储数据collapses，collapses是一个数组，数组中的每一个项都是一个对象。
const collapses = [

{
    title: "反馈",
    content: "控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作"
},
{
    title: "效率",
    content: "简化流程：设计简洁直观的操作流程"
},
{
    title: "可控",
    content: "用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策"
}

];
首先将初始值存储起来：window.localStorage.setItem("collapses", collapses);
然后在pos-y处取出collapses的值，取出的方式是：
const collapses = window.localStorage.getItem("collapses");
理论上应该得到[

{
    title: "反馈",
    content: "控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作"
},
{
    title: "效率",
    content: "简化流程：设计简洁直观的操作流程"
},
{
    title: "可控",
    content: "用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策"
}

]
实际却是："[object Object],[object Object],[object Object]"

尝试过的方法

类型是字符串，于是我就将字符串进行解析：JSON.parse(collapses);
不幸报错："SyntaxError: Unexpected token o in JSON at position 1"

JSON.parse() 方法只能解析字符串，但是"[object Object],[object Object],[object Object]"中明显包含对象。所以解析失败。

解决方案

localStorage 中的键值对总是以字符串的形式存储。

在存储的时候将要存储的值转化成字符串。
window.localStorage.setItem("collapses", JSON.stringify(collapses));
取出的时候将字符串取出然后进行解析
JSON.parse(window.localStorage.getItem("collapses"));

Answer 1

是的，localStorage和sessionStorage只能存储字符串、数字等基础类型的数据

Answer 2

自问自答就很有趣，哈哈哈哈哈哈哈