面试备战录

1、一个域名跳转到另一个域名的方式有哪些？有哪些注意事项？

在 Web 应用中，域名之间的跳转有以下几种常见方式，每种方式都有各自的适用场景和注意事项:

• HTML 原生跳转（a 标签）

// 使用a标签, 浏览器会自动打开链接
<a href="https://example.com" target="_blank"></a>

• JavaScript 跳转

// 替换当前标签页的地址，适合页面主动跳转。优点：不会被拦截； 缺点：不能打开新标签页
window.location.href = 'https://example.com'
// 优点:可以控制打开标签页的方式，操作灵活； 缺点:非用户主动触发，可能会被浏览器拦截
window.open('https://example.com')

扩展场景: 请求接口，接口返回一个链接跳转链接，打开一个新标签页打开链接。

• 如果点击按钮前，已经获取到链接, 可以使用 window.open(url) 打开新页面;
• 点击按钮请求接口,链接是异步获取的，这样可以先打开一个新的空的标签页,在进行赋值

const clickBtn = ()=>{
  // 立即打开空白页
  const win = window.open('about:blank', '_blank'); 
  fetch('/api/getJumpUrl')
    .then(res => res.json())
    .then(data => {
      win.location.href = data.url;
    });
}

2、cookie、sessionStorage、localStorage 区别，是否可以跨标签请求

在同源策略(协议、主机名、端口号都相同)下

• localStorage: 永久保存(除非手动删除)、约5MB 存储、跨标签页也可以共享数据。
• sessionStorage: 仅在当前标签页会话有效，关闭失效; 约5MB 存储、跨标签页不共享。
• cookie: 可以设置过期时间；不设置和 sessionStorage 一样会话级别; 4KB 左右、可以标签页共享;

// cookie 设置过期时间
document.cookie = 'token=abc123; expires=Fri, 07 Jun 2025 12:00:00 GMT; path=/';
document.cookie = 'token=abc123; max-age=3600; path=/';

扩展: 同一个标签页 使用 A 页面通过 window.location.href 替换掉当前页面跳转到 B 页面，B 页面再次跳转回 A 页面，只要标签页不关闭，sessionStorage、cookie 还是存在的