在前端的开发过程中，我们经常需要在浏览器端进行本地数据的存储操作，而 ngx-webstorage 是一个用于实现本地存储的 npm 包，它主要提供了 session storage 和 local storage 的封装，并支持 Angular 框架。
安装 ngx-webstorage
要使用 ngx-webstorage，我们首先需要将它安装到我们的项目中。在项目的根目录下，使用以下命令来安装 ngx-webstorage：
npm install ngx-webstorage --save
使用 ngx-webstorage
引入模块
安装完 ngx-webstorage 后，我们需要在项目中引入它的模块，可以将以下代码添加到 app.module.ts 文件中：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ------------------- - ---- ----------------- ----------- ------------- - ------------ -- -------- - -------------- ----------------------------- ------- --------- ---------- --- -- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -展开代码
在上面的代码中，我们先通过 import 关键字引入 NgxWebstorageModule 模块，然后在 imports 数组中包含了 BrowserModule 和 NgxWebstorageModule。在 NgxWebstorageModule.forRoot() 方法里，我们可以设置一些参数。其中 prefix 表示键名前缀，separator 表示键名之间的分隔符。如果不设置这些参数，ngx-webstorage 使用的是默认值。
存储数据
在使用 ngx-webstorage 时，我们需要将其注入到我们的组件中。可以在构造函数中注入它的依赖，如下：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------------- - ---- ----------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ------------------- -------- -------------------- - --------------------------- ----------- - -展开代码
在上面的代码中，我们使用了 LocalStorageService，然后在构造函数中注入了它的依赖。store() 方法用于将 data 存储在本地存储中，可以在其前面指定一个键名（如这里的 myKey）。当然，你可以使用其它方法存储数据，比如：
- set()：用于在 session storage 或 local storage 中存储数据，不会受到浏览器会话关闭的影响。
- add()：用于向本地存储中添加一条数据。
- clear()：用于清空本地存储中的数据。
- has()：用于检查本地存储中是否存在某个键名。
- remove()：用于删除本地存储中的某一条数据。
读取数据
如果需要读取本地存储中的数据，则可以在组件中读取，如下：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------------- - ---- ----------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ------ ---- ------------------- -------- -------------------- - ---------- - ------------------------------- ------------------------ - -展开代码
在上面的代码中，我们使用了 retrieve() 方法来获取本地存储中的某个键名的值，这里的键名是 myKey。
删除数据
如果需要删除本地存储中的某个数据，则可以使用 remove() 方法，如下：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------------- - ---- ----------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ------------------- -------- -------------------- - ----------------------------- - -展开代码
示例代码
完整的使用示例：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------------- - ---- ----------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ------ ---- ------------------- -------- -------------------- - --------------------------- ----------- ---------- - ------------------------------- ------------------------ ----------------------------- - -展开代码
总结
通过 ngx-webstorage，我们可以方便地实现本地存储的功能。不管是存储数据还是读取数据，都非常容易操作。尝试使用本教程中的代码，熟练掌握 ngx-webstorage 的使用方法，可以极大地提高我们的前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62062
