在现代 web 应用程序中，跨站点通信已成为一个常见的需求。在实现时，程序员通常会面临跨域和安全性限制，并且需要在不同的站点共享数据。对于这个问题，Cross域存储解决方案为 JavaScript 应用程序提供了一种无需使用中间服务器的简单方法，这个解决方案还可以保证多个站点之间数据的安全性。而 cross-storage-ext 就是一种强大的跨域存储解决方案。
本文将详细介绍如何使用 npm 包 cross-storage-ext，帮助前端工程师更好地理解这个强大的跨域存储解决方案。
准备工作
在开始使用 cross-storage-ext 之前，需要先安装 Node.js 和 npm 包管理器。
您可以使用以下命令检查您的系统是否已经安装了必要的软件：
node --version npm --version
如果这两个命令都能正常输出版本信息，那么您已经准备好了使用 cross-storage-ext。
安装 cross-storage-ext
您可以使用以下命令安装 cross-storage-ext：
npm install cross-storage-ext
在完成安装后，您可以通过以下命令验证一下：
npx cross-storage-ext -h
如果您能看到使用方法和选项的帮助文档，那么您已经安装了成功了。
使用教程
cross-storage-ext 包提供了一个名为 CrossStorageFactory 的类，我们可以用它来创建跨站数据存储的实例。
首先，让我们创建一个 JavaScript 文件，在其中导入 CrossStorageFactory 类：
const CrossStorageFactory = require('cross-storage').CrossStorageFactory;接下来，创建 CrossStorageFactory 实例，并定义一个存储数据：
const storage = new CrossStorageFactory([
{origin: /localhost:8080$/, allow: ['get', 'set']},
]).create();在这里，我们定义了一个仅允许本地主机 8080 端口发起的 get 和 set 操作的仓库。如果需要在其他域之间共享数据，可以添加多个跨站点仓库。这里使用的 allow 参数是一个数组，包含所有可用操作的名称。除了 get 和 set 操作外，还可以使用 del 操作来清除数据。
此时，您已经创建了一个跨源存储实例。让我们看一下如何使用它来存储和获取数据。
存储数据
使用 put 方法向跨站存储中存储数据，put 方法接受一个对象作为第一个参数：
storage.onConnect().then(function() {
return storage.put('key', { value: 'value' });
}).then(function() {
console.log('Data has been stored');
}).catch(function(err) {
console.log('Error storing data:', err);
});在这个例子中，我们使用 put 方法将一个 key-value 对象存储在跨源存储中。当存储完成后，我们将输出 Data has been stored。如果存储失败，将输出 Error storing data。
读取数据
使用 get 方法从跨站存储中读取数据，get 方法接受一个键作为其唯一参数:
storage.onConnect().then(function() {
return storage.get('key');
}).then(function(value) {
console.log('Stored value is:', value);
}).catch(function(err) {
console.log('Error reading data:', err);
});在这个例子中，我们使用 get 方法从跨源存储中读取与给定键关联的数据。当读取完成后，我们将输出 Stored value is:，该行之后将打印所读取的数据。如果读取失败，则将输出 Error reading data。
删除数据
使用 del 方法删除存储在跨源存储中的数据，del 方法接受一个键作为其唯一参数：
storage.onConnect().then(function() {
return storage.del('key');
}).then(function() {
console.log('Data has been deleted');
}).catch(function(err) {
console.log('Error deleting data:', err);
});在这个例子中，我们使用 del 方法删除与给定键关联的数据。删除完成后，我们将输出 Data has been deleted。如果删除失败，则将输出 Error deleting data。
示例代码
最后，让我们看一下使用 cross-storage-ext 包进行存储和检索数据的完整示例代码：
-- -------------------- ---- ------- ----- ------------------- - --------------------------------------------- ----- ------- - --- --------------------- -------- ------------------ ------ ------- ------ -------- ------------ ----------------------------------- - ------ ------------------ - ------ ------- --- ------------------ - ----------------- --- ---- --------- ------------------ - ------ ------------------- ----------------------- - ------------------- ----- ----- ------- ------------------ - ------ ------------------- ------------------ - ----------------- --- ---- ---------- ---------------------- - --------------------- ----- ---
在这里，我们创建了一个名为 storage 的仓库，它仅允许本地主机 8080 端口进行 get、set 和 del 操作。然后我们使用 put 方法将一个 key-value 对象存储在仓库中，并打印出 Data has been stored。随后使用 get 方法读取存储的数据，并打印出 Stored value is: value。最后，我们使用 del 方法删除了存储在仓库中的数据，并打印出 Data has been deleted。
总结
本文帮助您了解了如何使用 cross-storage-ext 包实现跨源存储解决方案。cross-storage-ext 包为 JavaScript 应用程序提供了一个易于使用的接口，可以在多个站点之间安全地共享数据。希望这篇文章能够帮助您更好地理解跨域存储在现代 web 开发中扮演的角色，并帮助您实现这个功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671e81e8991b448e3829