如何让Chrome开发者工具中JavaScript变量跨页面持久化？

当然可以，有几种实用的方法能实现变量跨页面持久化，满足你多页面提取数据并追加的需求：

1. 利用浏览器本地存储（localStorage/sessionStorage） #

页面跳转后内存中的变量会被销毁，所以要把数据存在浏览器的持久化存储里。因为存储仅支持字符串格式，需要用JSON.stringify()和JSON.parse()完成数组与字符串的转换：

存储当前页数据 #

const List = fetchDetails(element);
// 把List存入localStorage
localStorage.setItem('persistedList', JSON.stringify(List));

下一页读取并追加新数据 #

// 读取已有数据，无数据则初始化空数组
const existingList = JSON.parse(localStorage.getItem('persistedList')) || [];
const List2 = fetchDetails(element);
// 追加新数据
existingList.push(...List2);
// 更新存储
localStorage.setItem('persistedList', JSON.stringify(existingList));

注意：如果你的List里包含函数、DOM元素这类无法被JSON序列化的内容，需要先将其转换为纯对象/数组格式再存储。

2. 用DevTools面板管理存储数据 #

你可以直接在Chrome DevTools的Application面板里查看和修改存储的数据：

• 打开DevTools（F12/右键检查），切换到Application标签
• 在左侧菜单找到Local Storage/Session Storage，选中当前域名就能看到persistedList的值，也能手动编辑或删除，方便调试。

3. 用DevTools代码片段（Snippets）自动化流程 #

把你的数据提取逻辑写成可复用的代码片段，每次在新页面运行就能自动完成读取、追加、存储的操作：

1. 打开DevTools的Sources面板，切换到Snippets标签
2. 右键点击空白处，选择「New snippet」，粘贴下面的代码：

(function() {
  // 读取已存储的数据，无数据则初始化空数组
  let persistedList = JSON.parse(localStorage.getItem('persistedList')) || [];
  // 提取当前页数据
  const currentPageData = fetchDetails(element);
  // 追加新数据
  persistedList.push(...currentPageData);
  // 保存更新后的数据
  localStorage.setItem('persistedList', JSON.stringify(persistedList));
  // 打印当前累计数据量，方便确认
  console.log(`累计数据条数：${persistedList.length}`);
})();

3. 每次跳转到新页面后，右键点击这个片段选择「Run」即可自动完成数据追加。

4. 扩展方案：用户脚本（User Script） #

如果需要更自动化的操作（比如页面加载后自动执行提取），可以用Tampermonkey这类用户脚本插件，脚本逻辑同样基于localStorage持久化，这样不用每次手动在DevTools里运行代码。

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