You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何合并分散存储在Session Storage中的多组数据?

如何合并Session Storage中的多个数组数据

当然可以将Session Storage中的多个数组合并为一个。你的代码存在几个关键问题,导致无法实现合并:

  • sessionStorage.setItem()方法没有返回值,所以FNDataOne、FNDataTwo、FNDataThree都是undefined,无法直接用于合并
  • 合并前需要先从Session Storage中取出存储的字符串数据,用JSON.parse()解析为数组
  • concat是数组的实例方法,不能直接全局调用,需要基于数组或者通过Array.concat()使用

以下是修正后的代码:

function FnOne() {
    let arrayInFnOne = [
      {'id': 1, 'Choices': 'Cheeta'},
      {'id': 2, 'Choices': 'Eagle'},
      {'id': 3, 'Choices': 'Elephant'},
      {'id': 4, 'Choices': 'Duck'},
      {'id': 5, 'Choices': 'Deer'}
    ]
    sessionStorage.setItem('FNoneData', JSON.stringify(arrayInFnOne));
}

function FnTwo(){
  let arrayInFnTwo = [
        {'id': 6, 'Choices': 'Eggplant'},
        {'id': 7, 'Choices': 'Tomato'},
        {'id': 8, 'Choices': 'Potato'},
        {'id': 9, 'Choices': 'String beans'},
        {'id': 10, 'Choices': 'Squash'}
      ]
    sessionStorage.setItem('FNtwoData', JSON.stringify(arrayInFnTwo));
}

function FnThree(){
let arrayInFnThree = [
        {'id': 11, 'Choices': 'Paper'},
        {'id': 12, 'Choices': 'Pencil'},
        {'id': 13, 'Choices': 'Monitor'},
        {'id': 14, 'Choices': 'Pentel Pen'},
        {'id': 15, 'Choices': 'Wire'}
      ]
    sessionStorage.setItem('FNthreeData', JSON.stringify(arrayInFnThree));
}

// 先执行三个函数存入数据
FnOne();
FnTwo();
FnThree();

document.querySelector('button').addEventListener('click', () => {
    // 从Session Storage取出数据并解析为数组,不存在则返回空数组避免报错
    let dataOne = JSON.parse(sessionStorage.getItem('FNoneData')) || [];
    let dataTwo = JSON.parse(sessionStorage.getItem('FNtwoData')) || [];
    let dataThree = JSON.parse(sessionStorage.getItem('FNthreeData')) || [];
    
    // 合并三个数组
    let mergedArray = dataOne.concat(dataTwo, dataThree);
    
    // 存入新的Session Storage项
    sessionStorage.setItem('FinalDataAns', JSON.stringify(mergedArray));
    
    // 输出合并后的结果
    console.log(mergedArray);
})
<button>
Save
</button>

关键步骤说明:

  • 先执行三个数据存入函数,确保Session Storage中有对应的数据
  • 取出数据时添加|| []处理,避免存储项不存在时JSON.parse()返回null导致报错
  • 使用数组concat()方法一次性合并多个数组,得到完整的合并结果
  • 将合并后的数组转为字符串存入新的Session Storage项,方便后续页面调用

内容的提问来源于stack exchange,提问作者Strywyr

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.24 20:15:09