如何在Cypress测试中管理两个不同路径对应的localStorage

注意：Web标准中的localStorage为同源（协议+域名+端口三者完全一致）隔离，不存在按路径区分存储的规则，同源下所有路径共享同一份localStorage存储空间。你感知到的“不同路径对应不同localStorage”通常是跨源差异、或是Cypress测试隔离机制自动清空存储导致的。

常见问题说明 #

• 你调用Cypress.LocalStorage返回空是因为这是Cypress内部管理存储缓存的API，不是读取当前页面真实localStorage的方法，正确读写入口是获取当前页面的window对象后操作其localStorage属性。
• localStorage没有类似cookie的path配置参数，不需要额外指定路径实现分路径操作。

具体实现方案 #

场景1：两个路径属于同源 #

直接切换到对应路径后操作即可，示例代码：

// 读取/设置路径A的localStorage
cy.visit('/path-a')
cy.window().then(win => {
  // 获取条目
  const targetVal = win.localStorage.getItem('你要操作的键名')
  // 设置条目
  win.localStorage.setItem('你要操作的键名', '自定义值')
})

// 读取/设置路径B的localStorage
cy.visit('/path-b')
cy.window().then(win => {
  const targetVal = win.localStorage.getItem('你要操作的键名')
  win.localStorage.setItem('你要操作的键名', '另一个自定义值')
})

如果不需要跳转路径也可以直接设置，同源下所有路径都会读取到相同的存储内容。

场景2：两个路径属于不同源 #

此时需要用cy.origin包裹对应源的操作逻辑，避免Cypress测试隔离机制清空跨源存储：

// 操作源A（比如https://a.domain.com/path-a）的localStorage
cy.origin('https://a.domain.com', () => {
  cy.visit('/path-a')
  cy.window().then(win => {
    win.localStorage.setItem('键名', '源A对应的值')
  })
})

// 操作源B（比如https://b.domain.com/path-b）的localStorage
cy.origin('https://b.domain.com', () => {
  cy.visit('/path-b')
  cy.window().then(win => {
    win.localStorage.setItem('键名', '源B对应的值')
  })
})

内容的提问来源于stack exchange，提问作者vitaliy4us