揭秘JS JSON传参技巧，轻松实现跨页面数据传递！

1. 引言

在Web开发中，跨页面数据传递是一个常见的需求。无论是从服务器获取数据，还是将数据从一页传递到另一页，JSON（JavaScript Object Notation）都是一种非常方便的数据交换格式。本文将详细介绍JavaScript中JSON传参的技巧，帮助开发者轻松实现跨页面数据传递。

2. JSON简介

JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。它基于JavaScript对象表示法，独立于语言和平台。

2.1 JSON的基本语法

对象：使用大括号 {} 表示，键值对之间使用冒号 : 分隔，键和值之间使用逗号 , 分隔。
数组：使用中括号 [] 表示，元素之间使用逗号 , 分隔。
布尔值：true 或 false。
数字：任意JavaScript支持的数字。
字符串：使用双引号 " 或单引号 ' 包围。

2.2 JSON的示例

{ "name": "张三", "age": 30, "isStudent": false, "hobbies": ["阅读", "编程", "旅游"], "address": { "province": "北京", "city": "北京", "district": "朝阳区" } }

3. 跨页面数据传递方法

3.1 URL传参

通过URL传递参数是一种简单的方法，但只能传递少量数据，且不够安全。

3.1.1 示例

// 假设有一个页面页面A，需要将用户信息传递到页面B // 页面A的URL：http://example.com/pageA?name=张三&age=30 // 页面B的JavaScript代码： var params = new URLSearchParams(window.location.search); var name = params.get('name'); var age = params.get('age'); console.log(name); // 输出：张三 console.log(age); // 输出：30

3.2 Cookie传参

Cookie是一种存储在客户端的数据，可以用于跨页面传递数据。但Cookie有大小限制，且安全性较低。

3.2.1 示例

// 设置Cookie document.cookie = "name=张三; age=30"; // 获取Cookie var cookies = document.cookie.split(';'); var name = ''; var age = ''; for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].trim(); if (cookie.indexOf('name=') === 0) { name = cookie.substring(5); } else if (cookie.indexOf('age=') === 0) { age = cookie.substring(4); } } console.log(name); // 输出：张三 console.log(age); // 输出：30

3.3 LocalStorage和SessionStorage传参

LocalStorage和SessionStorage是HTML5提供的一种存储机制，可以存储大量数据，且安全性较高。

3.3.1 示例

// 设置LocalStorage localStorage.setItem('name', '张三'); localStorage.setItem('age', '30'); // 获取LocalStorage var name = localStorage.getItem('name'); var age = localStorage.getItem('age'); console.log(name); // 输出：张三 console.log(age); // 输出：30 // 设置SessionStorage sessionStorage.setItem('name', '张三'); sessionStorage.setItem('age', '30'); // 获取SessionStorage var name = sessionStorage.getItem('name'); var age = sessionStorage.getItem('age'); console.log(name); // 输出：张三 console.log(age); // 输出：30

3.4 JSON传参

JSON传参是跨页面数据传递的最佳方法，可以传递大量数据，且安全性较高。

3.4.1 示例

// 页面A的JavaScript代码： var data = { name: '张三', age: 30 }; // 将JSON字符串转换为URL编码格式 var jsonData = encodeURIComponent(JSON.stringify(data)); // 将数据存储在LocalStorage中 localStorage.setItem('user', jsonData); // 页面B的JavaScript代码： // 获取LocalStorage中的数据 var jsonData = localStorage.getItem('user'); // 将URL编码格式转换为JSON字符串 var data = JSON.parse(decodeURIComponent(jsonData)); console.log(data.name); // 输出：张三 console.log(data.age); // 输出：30