前言
在 Web 开发中，我们经常需要在不同窗口之间传递数据。虽然可以使用 cookie 或者 localstorage 等浏览器原生 API 进行数据传递，但它们的作用范围受到了安全限制，会让数据被不相关的脚本获取到。另外，也无法在同源以外的窗口中进行通信。
而 window.name 就是一种可以绕过这些限制的传递方式。通过将数据存储在 window.name 属性中，我们可以在不同的窗口之间传递数据，并且不受同源策略的限制。同时，由于 window.name 是在浏览器内存中存储的，它的作用范围也不会受到浏览器安全限制的影响。
本篇文章主要介绍如何使用 npm 包 window.name 来进行数据传递。
window.name 包的安装
可以通过 npm 安装 window.name 包，步骤如下：
npm install window.name --save
安装之后，即可在项目中使用 window.name 库。
window.name 的使用
使用 window.name 库非常简单。为了演示用例，我们假设有两个页面：A 页面和 B 页面。
首先，在 A 页面中将数据写入 window.name 中：
import { setName } from 'window.name';
setName('data from A');然后，在 B 页面中读取数据：
import { getName } from 'window.name';
console.log(getName()); // 输出 "data from A"可以看到，在 B 页面中，我们成功地获取了在 A 页面中写入到 window.name 中的数据。
需要注意的是，为了保证在不同窗口之间传递的数据不被覆盖，我们应该为数据设置一个唯一的名称。比如：
import { setName } from 'window.name';
setName('data from A', 'unique-name');然后在 B 页面中读取：
import { getName } from 'window.name';
console.log(getName('unique-name')); // 输出 "data from A"通过为数据设置了唯一名称，即使在同一个窗口中，不同的代码也不会意外地读取到相同的数据。
总结
本篇文章主要介绍了如何使用 npm 包 window.name 来进行数据传递。通过这种方式，我们可以在不同窗口之间传递数据，并且不受同源策略的限制。同时，由于 window.name 存储在浏览器内存中，它的作用范围也不会受到浏览器安全限制影响。对于需要在不同窗口之间传递数据的 Web 开发者来说，window.name 是一个非常实用的工具。
示例代码
GitHub 仓库地址：https://github.com/oylx/npm-window-name-tutorial
A 页面：
-- -------------------- ---- -------
--------- -----
------
------
----------- ---------
-------
------
------- -------------- -----------
------- ----------------------
-------
-------import { setName } from 'window.name';
document.getElementById('btn').addEventListener('click', function() {
setName('data from A', 'unique-name');
});B 页面：
-- -------------------- ---- -------
--------- -----
------
------
----------- ---------
-------
------
------- ----------------------
-------
-------import { getName } from 'window.name';
console.log(getName('unique-name')); // 输出 "data from A"来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f4f441e8250f93ef8900308