在前端开发中，我们经常使用本地存储来存储数据，而 localStorage 是其中一种比较常用的方式。但是在写测试用例时，很难对 localStorage 进行测试，因为它只在浏览器中可用。这时就需要 localstorage-mock，一个可以模拟浏览器环境中 localStorage 的 npm 包。
安装
使用 npm 安装 localstorage-mock：
npm install --save-dev localstorage-mock
使用
初始化
在测试用例中，首先需要把 window.localStorage 替换成 localStorage-mock，以便我们可以调用它的方法。
import LocalStorageMock from 'localstorage-mock'; global.localStorage = new LocalStorageMock();
这样就可以在测试中像使用真正的 localStorage 一样使用 localStorage-mock 了。
存储数据
LocalStorageMock 使用和 localStorage 一样的 API，比如：
localStorage.setItem('key', 'value');获取数据
获取数据也很简单，比如：
localStorage.getItem('key');删除数据
可以使用 removeItem() 方法来删除一个 key-value：
localStorage.removeItem('key');清空所有数据
可以使用 clear() 方法来清空所有数据：
localStorage.clear();
示例
下面是一个使用 localstorage-mock 的示例：
-- -------------------- ---- -------
------ ---------------- ---- --------------------
-------------- -------------- -- -- -
------------ -- -
------------------- - --- -------------------
---
------- --- ------ -- -- -
---------------------------- -------
-------------------------------------------------
---
------- ------ ------ -- -- -
---------------------------- -------
--------------------------------
------------------------------------------------
---
------- ----- --- ------ -- -- -
---------------------------- -------
--------------------------- ----
---------------------
------------------------------------------------
-----------------------------------------------
---
---总结
在前端开发中，使用 localStorage 存储数据是一种常用的方式，而 localstorage-mock 可以帮助我们在测试中模拟 localStorage 的行为，让我们能够更方便地进行测试。在使用 localstorage-mock 时，需要首先把 window.localStorage 替换成 localStorage-mock，接着就可以使用和 localStorage 一样的 API 来存储、获取和删除数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1a81e8991b448daafb