前言
在现代 Web 应用程序开发中，前端开发通常需要保存和共享一些数据。在以前，开发人员通常使用 cookie 或浏览器本地存储来实现这一需求。然而，这些选项都有其限制和问题，例如 cookie 的容量和安全性，以及浏览器本地存储的跨浏览器兼容性问题。
这就是为什么现代前端开发人员越来越倾向于使用通用存储库。ng-universal-storage 是一个很好的选择。ng-universal-storage 是一个轻量级的 Angular (2+) 服务，允许您在客户端和服务器 (universal) 之间共享数据。
安装
首先，您需要按照以下方式安装 ng-universal-storage：
npm install ng-universal-storage --save
使用
使用 ng-universal-storage 的步骤如下：
- 在 app.module.ts 文件中，导入
BrowserModule和BrowserAnimationsModule并添加到@NgModule的 imports 数组中
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
-----------
-------- -
--------------
-----------------------
--
-- ----- -------------
--
------ ----- --------- --- 在 app.module.ts 文件中，将 NgUniversalStorageModule 添加到
@NgModule的 imports 中
-- -------------------- ---- -------
------ - ------------------------ - ---- -----------------------
-----------
-------- -
--------------
------------------------
------------------------
--
-- ----- -------------
--
------ ----- --------- --- 在您的服务或组件中，导入
NgUniversalStorageService，将其注入到应用程序中并使用它。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------------------- - ---- -----------------------
------------
--------- -----------
--------- -
-----
------------------------ ------------
------- ------------------------ --------------
------- ------------------------ --------------
------
--
--
------ ----- ------------ ---------- ------ -
------------------- -------- -------------------------- - -
---------- - -
---------- -
----------------------------- -----------
-
---------- -
----- ----- - ------------------------------
-------------------
-
-API
ng-universal-storage 具有以下 API：
常规 API
setItem(key: string, value: any, expires: number): 将一个值存储在它的键下。如果未指定expires，则该值将永久存储。getItem(key: string, defaultValue?: any): 获取指定键的值。如果不存在，则返回默认值。removeItem(key: string): 删除指定键的值。clear(): 删除所有存储的键值对。key(index: number): 获取存储中给定索引处的键。
Cookie API
getCookie(key: string): 获取指定键的 cookie 值。setCookie(key: string, value: any, options?: CookieOptions)：将一个值存储在它的键下的 cookie 中。options是一个可选配置对象，用于配置 cookie 选项，例如 cookie 到期时间和 cookie 域。removeCookie(key: string, options?: CookieOptions): 删除指定键的 cookie。如果未提供选项，则该 cookie 将使用当前页面路径和下一个过去的时间。
Session Storage API
getLocal(key: string): 获取指定键的会话存储值。setLocal(key: string, value: any): 将一个值存储在指定键的会话存储中。removeLocal(key: string): 从会话存储中删除指定键的值。
示例代码
下面是一个简单的示例，其中使用 ng-universal-storage 将值存储在客户端和服务器之间：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------------------- - ---- -----------------------
------------
--------- -----------
--------- -
-----
------------------------ ------------
------- ------------------------ --------------
------- ------------------------ --------------
------
--
--
------ ----- ------------ ---------- ------ -
------------------- -------- -------------------------- - -
---------- - -
---------- -
----------------------------- -----------
-
---------- -
----- ----- - ------------------------------
-------------------
-
-总结
ng-universal-storage 是一个非常有用的库，让您能够方便地在客户端和服务器之间共享数据。无论您是在构建 SPA 还是 SSR 应用程序，ng-universal-storage 都可以帮助您存储和访问数据。以上就是使用 ng-universal-storage 的详细教程。希望对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606781e8991b448de88f