Web Worker 是一种在 Web 应用程序中运行可并行执行的 JavaScript 程序的机制。与主线程分离，它可以在后台执行复杂的计算和其他任务，而不会阻止 UI 的响应。
本文将介绍如何使用 Web Worker 访问浏览器的本地存储，包括 localStorage 和 sessionStorage ，并提供示例代码。
localStorage 和 sessionStorage
localStorage 和 sessionStorage 都是浏览器提供的客户端存储解决方案。
- localStorage 存储的数据没有时间限制，在同一个浏览器的相同域名下都能访问到。
- sessionStorage 则是会话级别的存储，数据只存在于当前会话窗口中。
在 Web Worker 中访问 localStorage 和 sessionStorage
由于 Web Worker 不直接访问 DOM ，因此无法直接访问 localStorage 和 sessionStorage 。但有两种方法可以使 Web Worker 访问这些存储：
- 将存储值作为参数传递给 Web Worker
- 将存储值存储在 Web Worker 可以访问的 IndexedDB 中
以下是两种方法的详细说明和示例代码。
方法1：将存储值作为参数传递给 Web Worker
首先，在主线程中获取需要存储的值，并将其作为参数传递给 Web Worker：
// 获取需要存储的值
const myValue = localStorage.getItem('myKey');
// 创建 Web Worker，并将值作为参数传递给它
const myWorker = new Worker('worker.js');
myWorker.postMessage({ value: myValue });然后，在 Web Worker 中接收参数，并使用它来执行所需的操作：
-- -------------------- ---- ------- -- - --- ------ ----- -------------- - --------------- - ----- ------- - ----------------- -- ------- -- --- -- --------- ------------------ ------- -------- --- --
方法2：将存储值存储在 IndexedDB 中
如果需要在 Web Worker 中频繁访问存储数据，将其存储在 IndexedDB 中可能更方便。另外，IndexedDB 还可以存储大量数据，而不会影响主线程的性能。
首先，在主线程中打开 IndexedDB 数据库并保存所需的值：
-- -------------------- ---- ------- ----- ------- - ---------------------------- --- --------------- - --------------- - ------------------------- -- ----------------- - --------------- - ----- -- - -------------------- ----- ----------- - --------------------------- ------------- ----- ----- - ----------------------------------- -- ---- --------- - ------------------ --------- --
然后，在 Web Worker 中打开相同的数据库，并获取存储的值：
-- -------------------- ---- -------
----- ------- - ---------------------------- ---
--------------- - --------------- -
-------------------------
--
----------------- - --------------- -
----- -- - --------------------
----- ----------- - --------------------------- ------------
----- ----- - -----------------------------------
-- ------
----- ---------- - -------------------
------------------ - --------------- -
-----------------------
--
-------------------- - --------------- -
----- ------- - --------------------
-- -------
-- ---
--
--结论
本文介绍了如何使用 Web Worker 访问浏览器的本地存储，包括 localStorage 和 sessionStorage。通过将存储值作为参数传递给 Web Worker 或存储在 IndexedDB 中，可以轻松地在后台执行复杂的计算和其他任务，而不会影响主线程的性能。
示例代码：
- [访问 localStorage 的示例](https://codepen.io/chatgpt/pen/Vw
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15245