js跨页面改变值

在JavaScript中，跨页面改变值通常涉及到在不同页面间共享数据。以下是几种常见的方法及其基础概念、优势、类型、应用场景：

1. LocalStorage / SessionStorage

基础概念：

localStorage：数据存储在浏览器中，除非手动删除，否则不会过期。
sessionStorage：数据存储在浏览器中，仅在当前会话有效，关闭浏览器标签或窗口后数据会被清除。

优势：

简单易用，兼容性好。
不需要服务器支持，完全在客户端进行。

应用场景：

用户偏好设置。
表单数据的临时保存。

示例代码：

// 设置值
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');

// 获取值
const value = localStorage.getItem('key');
const sessionValue = sessionStorage.getItem('key');

// 跨页面改变值
// 页面A
localStorage.setItem('key', 'newValue');

// 页面B
window.addEventListener('storage', (event) => {
  if (event.key === 'key') {
    console.log('Value changed to:', event.newValue);
  }
});

2. Cookies

基础概念：

小型数据片段，存储在浏览器中。
可以设置过期时间。

优势：

可以设置过期时间。
可以通过HTTP请求发送到服务器。

应用场景：

用户身份验证。
跟踪用户行为。

示例代码：

// 设置Cookie
document.cookie = "key=newValue; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";

// 获取Cookie
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// 跨页面改变值
// 页面A
document.cookie = "key=newValue";

// 页面B
setInterval(() => {
  const value = getCookie('key');
  console.log('Cookie value:', value);
}, 1000);

3. Broadcast Channel API

基础概念：

允许同源页面之间进行通信。

优势：

实时性高。
简单易用。

应用场景：

多个标签页间的实时数据同步。

示例代码：

// 页面A
const channel = new BroadcastChannel('myChannel');
channel.postMessage('newValue');

// 页面B
const channel = new BroadcastChannel('myChannel');
channel.addEventListener('message', (event) => {
  console.log('Value changed to:', event.data);
});

4. SharedWorker

基础概念：

允许多个页面共享一个Web Worker。

优势：

可以在不同页面间共享复杂的数据和逻辑。
适用于需要高性能计算的场景。

应用场景：

实时数据处理。
复杂计算任务的共享。

示例代码：

// shared-worker.js
const connections = [];
onconnect = function(e) {
  const port = e.ports[0];
  connections.push(port);

  port.onmessage = function(e) {
    connections.forEach(conn => conn.postMessage(e.data));
  };
};

// 页面A
const worker = new SharedWorker('shared-worker.js');
worker.port.start();
worker.port.postMessage('newValue');

// 页面B
const worker = new SharedWorker('shared-worker.js');
worker.port.start();
worker.port.onmessage = function(e) {
  console.log('Value changed to:', e.data);
};