山东大学软件学院创新实训——项目记录（十）

一、存对象数组

sessionStorage 只能存储字符串，如果你想存储对象数组，需要将对象数组转换成 JSON 字符串。可以使用 JSON.stringify 将对象数组转换成字符串，然后存储在 sessionStorage 中；在读取时使用 JSON.parse 将字符串转换回对象数组。下面是具体示例代码：

存储对象数组

假设你有一个对象数组如下：

const myArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

你可以使用以下代码将其存储在 sessionStorage 中：

// 将对象数组转换为 JSON 字符串
const myArrayString = JSON.stringify(myArray);

// 存储在 sessionStorage 中
sessionStorage.setItem('myArrayKey', myArrayString);

读取对象数组

要从 sessionStorage 中读取并转换回对象数组，可以使用以下代码：

// 从 sessionStorage 中获取 JSON 字符串
const myArrayString = sessionStorage.getItem('myArrayKey');

// 将 JSON 字符串转换回对象数组
const myArray = JSON.parse(myArrayString);

// 现在 myArray 是一个对象数组
console.log(myArray);

示例代码总结

以下是完整的示例代码：

// 存储对象数组
const myArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const myArrayString = JSON.stringify(myArray);
sessionStorage.setItem('myArrayKey', myArrayString);

// 读取对象数组
const storedArrayString = sessionStorage.getItem('myArrayKey');
if (storedArrayString) {
  const storedArray = JSON.parse(storedArrayString);
  console.log(storedArray);
} else {
  console.log('No data found in sessionStorage');
}

注意事项

1. 数据大小限制：sessionStorage 有大小限制，通常为 5MB 左右（具体取决于浏览器）。如果数据过大，可能无法存储。
2. 生命周期：sessionStorage 的数据在页面会话期间有效，当页面会话结束（例如，关闭浏览器标签页或窗口）时，数据会被清除。如果需要持久存储，可以考虑使用 localStorage。

二、key-value的覆盖问题

当 sessionStorage 已经有了某个 key 的值，如果你再使用相同的 key 存储新的值，新的 key-value 会覆盖旧的值。

下面是一个示例代码展示如何覆盖 sessionStorage 中已有的值：

// 存储一个初始值
sessionStorage.setItem('myKey', 'initialValue');

// 获取并输出初始值
console.log(sessionStorage.getItem('myKey')); // 输出: 'initialValue'

// 使用相同的 key 存储新值
sessionStorage.setItem('myKey', 'newValue');

// 获取并输出新的值
console.log(sessionStorage.getItem('myKey')); // 输出: 'newValue'

在这个示例中，sessionStorage 最初存储了 key 为 'myKey'，值为 'initialValue'。当使用相同的 key 'myKey' 再次存储值 'newValue' 时，sessionStorage 中对应 key 的值被更新为 'newValue'。

覆盖对象数组的示例

如果你存储的是对象数组，同样会被覆盖。例如：

// 存储初始对象数组
const initialArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
sessionStorage.setItem('myArrayKey', JSON.stringify(initialArray));

// 获取并输出初始对象数组
console.log(JSON.parse(sessionStorage.getItem('myArrayKey')));

// 使用相同的 key 存储新的对象数组
const newArray = [
  { id: 3, name: 'Charlie' },
  { id: 4, name: 'Dave' },
];
sessionStorage.setItem('myArrayKey', JSON.stringify(newArray));

// 获取并输出新的对象数组
console.log(JSON.parse(sessionStorage.getItem('myArrayKey')));

在这个示例中，sessionStorage 中 key 为 'myArrayKey' 的值最初是 initialArray，后来被覆盖为 newArray。

三、sessionStorage是否存在某个key-value

要判断 sessionStorage 中是否存在某个 key 的值，可以使用 sessionStorage.getItem() 方法。如果该 key 存在并且有值，该方法将返回该值（字符串形式），否则将返回 null。你可以通过检查返回值是否为 null 来确定该 key 是否存在。

以下是一些示例代码展示如何进行此判断：

示例代码

// 假设要检查的 key 为 'myKey'
const key = 'myKey';

// 获取 key 对应的值
const value = sessionStorage.getItem(key);

// 检查是否存在
if (value !== null) {
  console.log(`Key "${key}" 存在，值为: ${value}`);
} else {
  console.log(`Key "${key}" 不存在`);
}

更通用的函数

你可以创建一个通用的函数来检查 sessionStorage 中是否存在某个 key 的值：

function hasSessionStorageKey(key) {
  return sessionStorage.getItem(key) !== null;
}

// 使用示例
const keyToCheck = 'myKey';
if (hasSessionStorageKey(keyToCheck)) {
  console.log(`Key "${keyToCheck}" 存在`);
} else {
  console.log(`Key "${keyToCheck}" 不存在`);
}

示例应用

结合前面的对象数组存储示例，如果需要判断 sessionStorage 中是否已存在某个对象数组，可以这样做：

// 存储对象数组
const myArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
sessionStorage.setItem('myArrayKey', JSON.stringify(myArray));

// 检查是否存在
const key = 'myArrayKey';
if (sessionStorage.getItem(key) !== null) {
  console.log(`Key "${key}" 存在`);
} else {
  console.log(`Key "${key}" 不存在`);
}

通过这种方式，你可以轻松判断 sessionStorage 中是否存在某个 key 的值，并根据需要进行相应的操作。