对象存储遭遇‘[Object Object]’：原因与解决方案

Storage存储对象变成‘[Object Object]’的问题
在JavaScript中，当我们尝试将一个对象存储到localStorage或者sessionStorage中时，可能会出现一个常见的问题，那就是对象变成了‘[Object Object]’。这通常是由于对象的存储和提取方式不当所导致的。
一、问题的原因
当我们将一个对象存储到localStorage或sessionStorage中时，浏览器会将其转换为字符串形式进行存储。这个转换过程中，对象的属性和值被转换为一个字符串表示，其中包含了对象的结构信息和数据内容。通常，这个转换过程是正确的，但是在某些情况下，可能会出现问题。
问题主要出现在以下两个方面：

1. 对象的属性名称或值包含特殊字符：如果对象的属性名称或值包含特殊字符，如空格、引号、括号等，那么这些字符在转换为字符串时可能会被错误地处理或忽略，导致对象存储为‘[Object Object]’。
2. 对象的属性值是函数、Symbol、undefined、null等类型：如果对象的属性值是函数、Symbol、undefined、null等类型，这些类型的值在转换为字符串时可能会被忽略或显示为默认值，导致对象存储为‘[Object Object]’。
   二、解决方案
   为了解决这个问题，我们可以采用以下几种方法：
3. 使用JSON.stringify和JSON.parse：我们可以使用JSON.stringify方法将对象转换为JSON格式的字符串，然后将其存储到localStorage或sessionStorage中。在提取对象时，我们可以使用JSON.parse方法将JSON格式的字符串转换回对象。

   const obj = { name: 'John', age: 30 };
   const str = JSON.stringify(obj);
   localStorage.setItem('myObj', str);
   const retrievedStr = localStorage.getItem('myObj');
   const retrievedObj = JSON.parse(retrievedStr);
   console.log(retrievedObj); // { name: 'John', age: 30 }

4. 使用自定义序列化和反序列化函数：我们可以使用自定义的序列化和反序列化函数来将对象转换为适合存储的字符串表示和从字符串表示中提取对象。这个过程需要我们手动处理特殊字符和不可序列化的值。

   function customSerialize(obj) {
   const serialized = Object.entries(obj).map(([key, value]) => `${key}:${value}`).join(',');
   return `[${serialized}]`;
   }
   function customDeserialize(str) {
   const pairs = str.split(',').map(pair => pair.split(':'));
   return Object.fromEntries(pairs);
   }
   const obj = { name: 'John', age: 30 };
   const str = customSerialize(obj);
   localStorage.setItem('myObj', str);
   const retrievedStr = localStorage.getItem('myObj');
   const retrievedObj = customDeserialize(retrievedStr);
   console.log(retrievedObj); // { name: 'John', age: 30 }

   以上两种方法都可以解决Storage存储对象变成‘[Object Object]’的问题。第一种方法简单易用，但只适用于可序列化的对象；第二种方法需要我们手动处理特殊字符和不可序列化的值，但可以处理更复杂的情况。在实际应用中，我们可以根据具体需求选择合适的方法来解决这个问题。