如何合并分散存储在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
相关产品推荐
相关产品推荐

