js 带json跳转页面

在JavaScript中，带JSON数据跳转页面通常涉及到使用window.location.href或者window.open方法，并将JSON数据以查询参数的形式附加到URL上。但是，这种方法有长度限制，并且JSON数据会暴露在URL中，可能不安全。

一个更好的方法是使用localStorage或sessionStorage来存储JSON数据，在跳转后的页面中读取这些数据。

以下是使用sessionStorage的示例：

存储JSON数据并跳转页面

// 假设有一个JSON对象
var jsonData = {
    name: "John",
    age: 30,
    city: "New York"
};

// 将JSON对象转换为字符串并存储在sessionStorage中
sessionStorage.setItem('jsonData', JSON.stringify(jsonData));

// 跳转到新页面
window.location.href = 'newPage.html';

在新页面中读取JSON数据

// 从sessionStorage中读取JSON字符串并转换回JSON对象
var jsonData = JSON.parse(sessionStorage.getItem('jsonData'));

// 使用JSON数据
console.log(jsonData.name); // 输出 "John"
console.log(jsonData.age);  // 输出 30
console.log(jsonData.city); // 输出 "New York"

优势

• 数据不会暴露在URL中，更安全。
• 没有长度限制，可以存储大量数据。

应用场景

• 当需要在页面跳转后保持某些状态或数据时。
• 当数据量较大，不适合通过URL传递时。

注意事项

• sessionStorage中的数据仅在当前会话有效，如果打开新的浏览器标签或窗口，数据将不可用。如果需要在不同标签或窗口间共享数据，可以考虑使用localStorage。
• 在存储敏感数据时，需要注意localStorage和sessionStorage的安全性。虽然它们位于客户端，不易被直接访问，但仍有可能受到XSS攻击。因此，不建议存储高度敏感的信息。