JavaScript 文件间共享列表的四种妙招，让数据传递畅通无阻

javascript

2024-03-14 23:57:56

如何在 JavaScript 文件之间共享列表

跨 JS 文件共享数据的重要性

在构建现代交互式 web 应用程序时，跨不同 JavaScript 文件共享数据至关重要。它使我们能够有效地传递数据，并在模块或组件之间实现无缝通信。

共享列表的四种方法

有四种常见的方法可以跨 JS 文件共享列表：

本地存储 (localStorage) ：一种浏览器的 API，用于在本地持久化数据，从而提供在不同文件之间共享列表的简便方法。
会话存储 (sessionStorage) ：与 localStorage 类似，但它在关闭浏览器选项卡或窗口后清除数据。
全局变量 ：声明为全局变量的变量可以在所有 JavaScript 文件中访问。
事件总线 ：一种设计模式，允许组件通过发布和订阅事件来通信和共享数据。

使用本地存储共享列表

在许多情况下，使用本地存储来共享列表是最简单的方法。在存储列表的 JS 文件中，使用 localStorage.setItem('list', list) 将列表保存到本地存储中。在需要访问列表的 JS 文件中，使用 localStorage.getItem('list') 检索列表。

在 HTML 中显示列表

为了在 HTML 中显示列表，您可以在获取列表的 JS 文件中使用 document.querySelector('ul') 获取 <ul> 元素，然后使用 innerHTML 属性设置列表项。

示例代码

// 存储列表的 JS 文件 (list.js)
localStorage.setItem('list', list);

// 检索列表的 JS 文件 (dragANDdrop.js)
const list = localStorage.getItem('list');

// 在 HTML 中显示列表
const html = list.map((item) => `<li>${item}</li>`).join('');
document.querySelector('ul').innerHTML = html;