js中 sessionStorage 如何存对象

在JavaScript中，sessionStorage是一个用于存储键值对的对象，它可以存储字符串类型的数据。如果要存储对象，需要将对象转换为字符串类型，然后再存储到sessionStorage中。

可以使用JSON.stringify()方法将对象转换为字符串，然后使用sessionStorage.setItem()方法将字符串存储到sessionStorage中。例如：

var obj = {name: "John", age: 30};
var str = JSON.stringify(obj);
sessionStorage.setItem("myObj", str);

这样就将一个对象存储到了sessionStorage中。如果需要获取存储的对象，可以使用sessionStorage.getItem()方法获取存储的字符串，然后使用JSON.parse()方法将字符串转换为对象。例如：

var str = sessionStorage.getItem("myObj");
var obj = JSON.parse(str);
console.log(obj.name); // 输出 "John"

相关问题

sessionstorage存map

SessionStorage 中只能存储字符串类型的数据，因此需要将 Map 转换为字符串再存储。可以使用 JSON.stringify() 方法将 Map 转换为 JSON 字符串，然后使用 SessionStorage.setItem() 方法将字符串存储到 SessionStorage 中。

示例代码如下：

// 创建一个 Map
const myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

// 将 Map 转换为 JSON 字符串并存储到 SessionStorage 中
const jsonString = JSON.stringify([...myMap]);
window.sessionStorage.setItem('myMap', jsonString);

// 从 SessionStorage 中读取 JSON 字符串并将其转换为 Map
const storedJsonString = window.sessionStorage.getItem('myMap');
const storedEntries = JSON.parse(storedJsonString);
const storedMap = new Map(storedEntries);

需要注意的是，如果 Map 中的值不是基本类型，而是对象、数组等复杂类型，则需要对这些值单独进行转换。同时，如果 Map 中的键不是字符串类型，则需要在转换为 JSON 字符串时指定键的转换方式。例如，可以将键和值都转换为字符串类型，然后存储到数组中。示例代码如下：

const myMap = new Map();
myMap.set({ name: 'Alice' }, [1, 2, 3]);

const jsonString = JSON.stringify([...myMap], (key, value) => [key.toString(), value]);
window.sessionStorage.setItem('myMap', jsonString);

const storedJsonString = window.sessionStorage.getItem('myMap');
const storedEntries = JSON.parse(storedJsonString, (key, value) => [JSON.parse(key), value]);
const storedMap = new Map(storedEntries);

在解析 JSON 字符串时，需要使用一个 reviver 函数将键和值恢复为原来的类型。该函数接受两个参数，分别是当前正在处理的键和值。在本例中，我们将键解析为对象类型，将值保持不变。

sessionstorage存数组

### 存储和读取数组到 `sessionStorage` 的最佳实践

#### 将数组存储至 `sessionStorage`

由于 `sessionStorage` 只能存储字符串类型的键值对，当需要存储复杂结构如数组时，需先将其序列化为JSON格式再存入。这可以通过调用 `JSON.stringify()` 方法完成。

let myArray = ["apple", "banana", "cherry"];
window.sessionStorage.setItem('myFruits', JSON.stringify(myArray));

此代码片段展示了如何将一个名为 `myFruits` 的键关联上由水果名称组成的数组并保存到 `sessionStorage` 中[^3]。

#### 从 `sessionStorage` 获取数组

要从 `sessionStorage` 中取出之前存储的数组，则应反向操作——即先通过 `getItem()` 函数获取对应的字符串表示形式，之后借助于 `JSON.parse()` 来解析回原始的JavaScript对象或数组。

let retrievedData = window.sessionStorage.getItem('myFruits');
if (retrievedData !== null){
    let parsedArray = JSON.parse(retrievedData);
}
console.log(parsedArray); // 输出: Array(3) ['apple', 'banana', 'cherry']

这段示例说明了怎样恢复先前存放在 `sessionStorage` 下标记为 `'myFruits'` 的项目，并验证其确实是一个有效的数组实例。

#### 安全注意事项

考虑到安全性问题，在处理涉及个人隐私或其他重要资料的情况下应当谨慎行事。尽管这里讨论的是相对简单的数据类型（例如公开可用的信息列表），但对于更敏感的内容则建议采取额外措施保护用户信息安全，比如采用加密技术或者其他更为安全的数据持久化方案[^4]。