当前位置：首页 > 行业动态 > 正文

html5存储数组

HTML5存储数组需转为JSON字符串后存入localStorage/sessionStorage，或使用IndexedDB直接存储结构化数据，读取时需解析还原

%ignore_a_3%数组详解

存储原理与方式

HTML5的localStorage和sessionStorage只能存储字符串类型的数据，因此存储数组时需要先将数组转换为JSON字符串格式，读取时再解析回数组。

操作 说明
JSON.stringify(array) 将数组序列化为JSON字符串
JSON.parse(str, reviver) 将JSON字符串解析为数组

存储数组的步骤

  1. 序列化数组：使用JSON.stringify()将数组转为字符串。
  2. 存入存储：通过localStorage.setItem(key, value)或sessionStorage.setItem(key, value)保存。
  3. 读取并解析：使用JSON.parse()将字符串还原为数组。

示例代码与操作

操作 代码示例 说明
存储数组 localStorage.setItem('myArray', JSON.stringify([1,2,3])); 将数组[1,2,3]存入localStorage，键名为myArray
读取数组 const arr = JSON.parse(localStorage.getItem('myArray')); 从localStorage读取并解析为数组
更新数组 <br>const arr = JSON.parse(localStorage.getItem('myArray')) || [];<br>arr.push(4);<br>localStorage.setItem('myArray', JSON.stringify(arr)); 读取数组并添加元素后重新存储
删除数组 localStorage.removeItem('myArray'); 移除键名为myArray的数据

注意事项

  • 键名冲突：不同数组需使用不同的键名，否则会覆盖原有数据。
  • 数据类型：读取时必须用JSON.parse()解析，否则会得到字符串而非数组。
  • 存储空间限制：localStorage通常限制为5MB左右，需避免存储过大的数组。

相关问题与解答

问题1：如何判断某个键对应的值是否是数组？

解答：
读取值后尝试解析，若解析失败或类型不符则不是数组，示例代码：

const value = localStorage.getItem('myArray');
if (value && Array.isArray(JSON.parse(value))) {
  console.log('是数组');
} else {
  console.log('不是数组');
}

问题2：存储对象数组时需要注意什么？

解答：

  1. 确保对象可被JSON.stringify()序列化（如无函数或undefined属性）。
  2. 解析时使用JSON.parse()，若结构复杂可传入reviver函数。 
    const objArr = JSON.parse(localStorage.getItem('objArray'), (key, val) => {
if (key === 'date' && typeof val === 'string') {
 return new Date(val); // 将日期字符串还原为Date对象
}
return val
3HTML5存储数组
0

相关文章