什么是 LocalStorage？
LocalStorage 是 HTML5 中的一个 Web 存储 API，它可以让我们在浏览器端存储数据。LocalStorage 是一种键值对存储方式，它可以存储字符串类型的数据，并且数据的大小限制在 5MB 左右。
LocalStorage 具有以下特点：
- 存储在浏览器端，不会被服务器端读取。
- 数据不会随着浏览器关闭而消失，除非主动清除。
- 可以跨页面访问。
在 Angular 应用中使用 LocalStorage
在 Angular 应用中，我们可以使用 Angular 提供的服务来访问 LocalStorage。Angular 提供了一个名为 LocalStorageService 的服务，它可以让我们方便地读写 LocalStorage 中的数据。
安装 LocalStorageService
首先，我们需要安装 angular-2-local-storage 库，它提供了 LocalStorageService 服务。可以使用以下命令进行安装：
--- ------- ----------------------- ------
注入 LocalStorageService
在我们的组件或服务中，需要注入 LocalStorageService 服务。可以使用以下代码进行注入：
------ - ------------------- - ---- -------------------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ -- ------ ----- ------------ - ------------------- -------------------- -------------------- -- -
存储数据
在我们的组件或服务中，可以使用 LocalStorageService 的 set 方法来存储数据。例如，以下代码将一个字符串类型的数据存储到 LocalStorage 中：
----------------------------------- ---------
获取数据
在我们的组件或服务中，可以使用 LocalStorageService 的 get 方法来获取数据。例如，以下代码将从 LocalStorage 中获取一个名为 key 的字符串类型的数据：
----- ----- - ------------------------------------
删除数据
在我们的组件或服务中，可以使用 LocalStorageService 的 remove 方法来删除数据。例如，以下代码将从 LocalStorage 中删除一个名为 key 的数据：
---------------------------------------
示例代码
以下是一个示例代码，它在组件中使用 LocalStorageService 存储和获取数据：
------ - --------- - ---- ----------------
------ - ------------------- - ---- --------------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------------------- -------------------- -------------------- --
---------- -
------------------------------------ --------
-
---------- -
----- ---- - -------------------------------------
------------------
-
-在 HTML 中，我们可以使用以下代码来调用 saveData 和 readData 方法：
------- ------------------------- ------------- ------- ------------------------- -------------
总结
LocalStorage 是一种在浏览器端存储数据的方法，它可以让我们方便地存储和获取数据。在 Angular 应用中，我们可以使用 LocalStorageService 服务来访问 LocalStorage。通过使用 LocalStorage，我们可以方便地在浏览器端存储数据，而不必依赖于服务器端。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66114936d10417a2221e68db