关闭浏览器仍可读取！前端跨域传值技巧

2024-01-30 00:35:31

在互联网技术飞速发展的今天，跨域传递数据逐渐成为前端开发工程师们日常生活中不可缺少的一项技能。跨域数据传递是指在不同的域名、协议或端口间进行数据交换。随着Web应用程序和服务的普及，跨域数据传递需求量不断增长。在实践中，前端开发工程师们经常会遇到在同一个主域名下，不同子域名间跨域名传递数据的问题。

本文将介绍使用localstorage和cookie来实现跨域数据传递。localstorage是一种浏览器本地存储技术，可以存储字符串数据。cookie是一种浏览器存储技术，可以存储键值对数据。这两种技术都可以在不同的子域名间共享数据。

使用localstorage实现跨域数据传递

localstorage是一种浏览器本地存储技术，可以在浏览器中存储数据，即使关闭浏览器后，数据也不会丢失。localstorage可以存储字符串数据，因此我们可以将数据序列化为字符串，然后存储到localstorage中。

// 将数据序列化为字符串
const data = {
  name: 'John Doe',
  age: 30,
};

const serializedData = JSON.stringify(data);

// 将序列化后的数据存储到localstorage中
localStorage.setItem('user', serializedData);

// 从localstorage中获取数据
const retrievedData = localStorage.getItem('user');

// 将获取到的数据反序列化为对象
const data = JSON.parse(retrievedData);

// 使用数据
console.log(data.name); // 输出："John Doe"
console.log(data.age); // 输出：30

使用cookie实现跨域数据传递

cookie是一种浏览器存储技术，可以在浏览器中存储键值对数据。cookie可以存储在服务器端或客户端。在跨域数据传递中，我们可以将数据存储在服务器端cookie中，然后在客户端读取cookie数据。

// 将数据存储到服务器端cookie中
const data = {
  name: 'John Doe',
  age: 30,
};

document.cookie = `user=${JSON.stringify(data)}`;

// 从服务器端cookie中获取数据
const cookieData = document.cookie;

// 将获取到的cookie数据解析为对象
const data = JSON.parse(cookieData.split('=')[1]);

// 使用数据
console.log(data.name); // 输出："John Doe"
console.log(data.age); // 输出：30