前言
在前端开发中，我们常常需要在浏览器端实现数据的存储与读取。目前比较流行的做法有使用 localstorage，cookie 等浏览器提供的 API，但是他们使用起来比较繁琐，并且存在一些限制。angular2-cool-storage-next 这个 npm 包就是为了解决这个问题而生的，它使用了 HTML5 Web Storage API 提供了一套简单易用的接口来存储数据并提供了很好的封装。
本文将介绍如何使用 angular2-cool-storage-next 这个 npm 包来实现数据的存储和读取，并且会提供一些常用操作的示例代码。
安装
通过 npm 可以很方便地安装 angular2-cool-storage-next：
npm install angular2-cool-storage-next --save
使用
首先需要在一个模块中注入 StorageModule：
-- -------------------- ---- -------
------ - ------------- - ---- -----------------------------
-----------
-------- -
---
-----------------------
-------- -------------------
----------- -----------
---
--
---
--
------ ----- --------- --其中 useFactory 方法用于返回配置对象：
export function envFactory(): StorageConfig {
return {
prefix: 'myapp_',
storageType: 'localStorage',
};
}这里我们将配置对象中的 prefix 属性设置为 'myapp_'，表示所有保存在 localstorage 中的数据的键名前缀都为 'myapp_'。而 storageType 则指定了要使用 localStorage 还是 sessionStorage。
完成以上配置之后，我们就可以在组件中使用了：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- -----------------------------
-----------------
------ ----- ------------ -
------------------- ------------- ----------------- --
---------- -
---------------------------------- - ----- ----------------------------- ------- ---- ---
-
---------- -
----- --- - -----------------------------------
-----------------
-
-我们在构造函数中注入了 CoolLocalStorage，然后就可以使用它提供的 setObject 和 getObject 方法来存储与读取数据了。注意，这里的 'key' 实际上会被处理为 'myapp_key'。
示例代码
以下是一些常用操作的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- -----------------------------
-----------------
------ ----- ------------ -
------------------- ------------- ----------------- --
---------- -
-- ----------
----------------------------- ------
-- ---------
----------------------------------- - ----- ----- ---- -- ---
-- ---------
------------------------------------- --------- --------- -----------
-
---------- -
-- -----------
----- ---- - ------------------------------
------------------ -- ----
-- ----------
----- ---- - ------------------------------------
------------------ -- - ----- ----- ---- -- -
-- ----------
----- ------ - --------------------------------------
-------------------- -- --------- --------- ---------
-
-------- -
-- -----------
---------------------------------
-
------- -
-- --------------
----- ------- - ------------------------------
--------------------- -- -----
-
------- -
-- -----------
--------------------------
-
-总结
angular2-cool-storage-next 这个 npm 包提供了一套简单易用的接口来实现浏览器端数据的存储与读取，它使用了 HTML5 Web Storage API 并对其进行了很好的封装。本文介绍了如何通过 npm 安装 angular2-cool-storage-next，并提供了一些常用操作的示例代码。希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672081e8991b448e38bf