从文件系统加载照片
我们已经实现了照片拍摄和保存到文件系统。有一个缺少的功能：照片存储在文件系统中，但我们需要一种方法来向每个文件保存指针，以便它们可以在照片库中再次显示。
幸运的是，这很简单：我们会利用电容器 存储API. 在键值存储中存储我们的一系列照片。
存储API.
首先定义一个常量变量，它将充当商店的钥匙
usephotogallery.
功能定义
SRC /挂钩/ umerphallery.ts
：
Const.
photo_storage.
=
“相片”
;
出口
功能
usephotogallery.
（
的）
{
}
然后，使用
贮存
类以访问Get和Set Set Set方法以便读取和写入设备存储：
在结束时
拍照
函数，添加呼叫
Storage.set（）
保存照片数组。通过此处添加，每次拍摄新照片时都会存储照片阵列。这样，应用程序用户关闭或切换到不同的应用程序时无关紧要 - 所有照片数据都已保存。
贮存
。
放
（
{
钥匙
：
photo_storage.
那
价值
：
杰森
。
stryify.
（
新照片
的）
}
的）
;
使用保存的照片阵列数据，我们将创建一种方法，该方法将在挂钩加载时检索数据。我们将通过使用React的作用来这样做
使用
钩。将其插入上面
拍照
宣言。这是代码，我们会缩小它：
使用
（
（
的）
=>
{
Const.
loadsaved.
=
异步
（
的）
=>
{
Const.
{
价值
}
=
等待
贮存
。
得到
（
{
钥匙
：
photo_storage.
}
的）
;
Const.
Photosinstorage.
=
（
价值
还
杰森
。
解析
（
价值
的）
：
[
]
的）
作为
yserphoto.
[
]
;
为了
（
让
照片
的
Photosinstorage.
的）
{
Const.
文件
=
等待
文件系统
。
readfile.
（
{
小路
：
照片
。
文件路径
那
目录
：
目录
。
数据
那
}
的）
;
//仅限Web平台：将照片加载为Base64数据
照片
。
WebViewPath.
=
`
数据：图像/ jpeg; base64，
$ {
文件
。
数据
}
`
;
}
设置
（
Photosinstorage.
的）
;
}
;
loadsaved.
（
的）
;
}
那
[
]
的）
;
这似乎起初有点可怕，所以让我们走过它，首先通过查看我们进入钩子的第二个参数：依赖数组
[]
。
默认情况下，使用effeffect钩子每次都会调用组件渲染，除非我们传入依赖关系阵列。在这种情况下，它只在更新依赖项时运行。在我们的情况下，我们只希望它被调用一次。通过将不会更改的空数组，我们可以阻止钩子被调用多次。
第一个参数
使用
是将通过效果调用的函数。我们通过匿名箭头函数，并且我们内部我们定义另一个异步方法，然后立即调用此方法。我们必须从钩子内调用Async函数，因为挂钩回调不能异步本身。
在移动（即将到来！），我们可以直接设置图像标记的源 -
- 到文件系统上的每个照片文件，自动显示它们。但是，在Web上，我们必须将每个图像从文件系统读入Base64格式，因为文件系统API将它们存储在Base64中
indexeddb.
在引擎盖下。
就是这样！我们在我们的IONIC应用程序中建立了完整的相册功能，这些功能在Web上运行。betway东盟体育app接下来，我们会将其转换为iOS和Android的移动应用程序！