handleGoDetails(item, type) { if (type == 'info') { sessionStorage.setItem('informationDetail', JSON.stringify(item)); window.open(`informationDetails.html`, '_self'); } else { window.open(`informationDetails.html?id=${item.id}`, '_self'); } },

时间: 2024-04-18 19:29:42 浏览: 42

json.stringify()与json.parse()的区别以及用处.docx

JSON.stringify() 和 JSON.parse() 是JavaScript中用于处理JSON数据的两个关键函数，它们在JSON对象序列化和反序列化过程中起着至关重要的作用。一、JSON.stringify() JSON.stringify() 的主要功能是将JavaScript对象转换为JSON字符串。这个过程称为序列化。在序列化过程中，它会忽略函数和Symbol类型的属性，除非提供了replacer参数（一个函数或数组），用于自定义序列化的规则。此外，它还可以接受一个可选的space参数，用于控制输出的缩进，使得输出的字符串更易读。例如： ```javascript let obj = { name: 'John', age: 30, city: 'New York' }; let jsonString = JSON.stringify(obj); console.log(jsonString); // "{"name":"John","age":30,"city":"New York"}" ``` 二、JSON.parse() 相反，JSON.parse() 用于将符合JSON格式的字符串解析为JavaScript对象。这是反序列化的过程。JSON.parse()会按照JSON规范将字符串转换为相应的数据结构，如对象、数组、字符串、数字等。如果字符串不符合JSON格式，它会抛出一个SyntaxError。例如： ```javascript let jsonString = '{"name":"John","age":30,"city":"New York"}'; let obj = JSON.parse(jsonString); console.log(obj); // {name: "John", age: 30, city: "New York"} ``` 三、JSON.stringify()的妙用 1. 判断数组是否包含特定对象或判断对象是否相等：由于JSON.stringify()会将对象转换为字符串，我们可以利用这一点进行比较。但需要注意，这种方法只适用于对象的结构相同，且属性值可序列化的情况。 ```javascript let data = [{name: '掘金'}, {name: 'css 学习'}, {name: 'js 学习'}]; let val = {name: '掘金'}; console.log(JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1); // true ``` 2. 使localStorage和sessionStorage能存储对象：这两个浏览器存储API默认只能存储字符串。我们可以使用JSON.stringify()将对象转换为字符串进行存储，再通过JSON.parse()取出时恢复为对象。 ```javascript function setLocalStorage(key, val) { window.localStorage.setItem(key, JSON.stringify(val)); } function getLocalStorage(key) { let val = JSON.parse(window.localStorage.getItem(key)); window.localStorage.removeItem(key); return val; } ``` 3. 实现对象深拷贝：JSON.stringify() 和 JSON.parse() 结合可以创建一个对象的深拷贝，但不适用于包含函数或循环引用的对象。 ```javascript function deepClone(data) { let _data = JSON.stringify(data), dataClone = JSON.parse(_data); return dataClone; } ``` 总结： JSON.stringify() 和 JSON.parse() 是JavaScript处理JSON数据的核心工具。它们在数据交换、存储和复制等方面有着广泛的应用。然而，需要注意的是，它们并不完美，例如无法处理函数和Symbol类型，以及在某些情况下可能无法实现完全的深拷贝。在实际开发中，应根据具体情况选择合适的使用方式。

这段代码是一个Vue.js中的方法handleGoDetails，根据传入的type参数进行不同的处理逻辑。如果type等于'info'，则将item对象转换为JSON字符串并存储在sessionStorage中。然后，使用window.open方法打开新的页面informationDetails.html。如果type不等于'info'，则使用window.open方法打开带有item.id参数的新页面informationDetails.html。总体而言，这个方法根据传入的type参数的不同，在打开新页面之前执行一些数据处理或存储操作。

阅读全文

handleGoDetails(item, type) { if (type == 'info') { sessionStorage.setItem('informationDetail', JSON.stringify(item)); window.open(`informationDetails.html`, '_self'); } else { window.open(`informationDetails.html?id=${item.id}`, '_self'); } },

相关推荐

JS中LocalStorage与SessionStorage五种循序渐进的使用方法

html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

H5 localStorage 和 sessionStorage 对json的处理方式

Vue.js与JSON数据在移动开发中的应用：打造跨平台移动应用的权威指南

使用sessionStorage和json存储写一个备忘录页面

sessionstorage的用法

怎么使用 sessionStorage

sessionstorage存map

sessionstorage 存入数组

vue监听sessionstorage变化

js监听sessionstorage变化

vue中sessionstorage的用法

ts封装localStorage和sessionStorage

vue中sessionStorage怎么用

最新推荐

localstorage实现带过期时间的缓存功能

教师节主题班会.pptx

正整数数组验证库：确保值符合正整数规则

管理建模和仿真的文件

【损失函数与随机梯度下降】：探索学习率对损失函数的影响，实现高效模型训练

在ADS软件中，如何选择并优化低噪声放大器的直流工作点以实现最佳性能？

系统移植工具集：镜像、工具链及其他必备软件包

"互动学习：行动中的多样性与论文攻读经历"

【损失函数与批量梯度下降】：分析批量大小对损失函数影响，优化模型学习路径

在设计高性能模拟电路时，如何根据应用需求选择合适的运算放大器，并评估供电对电路性能的影响？