从文件系统加载照片
我们实现了拍照和保存到文件系统。还缺少最后一个功能:照片存储在文件系统中，但我们需要一种方法来保存每个文件的指针，以便它们可以在相册中再次显示。
幸运的是，这很简单:我们将利用电容器 存储API 将我们的照片数组存储在一个键值存储中。
存储API
方法之前定义一个常量变量作为存储的键
usePhotoGallery
函数定义在
src /钩/ usePhotoGallery.ts
：
常量
PHOTO_STORAGE
＝
“照片”
；
出口
函数
usePhotoGallery
（
）
｛
｝
然后,使用
存储
类访问用于读写设备存储的get和set方法:
最后
takePhoto
函数，添加对的调用
Storage.set ()
保存Photos数组。通过在这里添加它，每次拍摄新照片时都会存储Photos数组。这样，当应用程序用户关闭或切换到不同的应用程序时，所有的照片数据都会被保存。
存储
．
集
（
｛
关键
：
PHOTO_STORAGE
，
价值
：
JSON
．
stringify
（
newPhotos
）
｝
）
；
保存了照片数组数据后，我们将创建一个方法，该方法将在钩子加载时检索数据。我们将使用React的
useEffect
钩。把它插入
takePhoto
声明。下面是代码，我们来分解一下:
useEffect
（
（
）
＝＞
｛
常量
loadSaved
＝
异步
（
）
＝＞
｛
常量
｛
价值
｝
＝
等待
存储
．
得到
（
｛
关键
：
PHOTO_STORAGE
｝
）
；
常量
photosInStorage
＝
（
价值
？
JSON
．
解析
（
价值
）
：
［
］
）
作为
UserPhoto
［
］
；
为
（
让
照片
的
photosInStorage
）
｛
常量
文件
＝
等待
文件系统
．
readFile
（
｛
路径
：
照片
．
filepath
，
目录
：
目录
．
数据
，
｝
）
；
//仅Web平台:加载照片作为base64数据
照片
．
webviewPath
＝
｀
数据:图像/ jpeg; base64,
$ {
文件
．
数据
｝
｀
；
｝
setPhotos
（
photosInStorage
）
；
｝
；
loadSaved
（
）
；
｝
，
［
］
）
；
乍一看，这似乎有点可怕，所以让我们来看看它，首先看看我们传递给钩子的第二个参数:依赖数组
［］
．
默认情况下，每次组件呈现时都会调用useEffect钩子，除非我们传入一个依赖数组。在这种情况下，它只会在依赖项更新时运行。在我们的例子中，我们只希望它被调用一次。通过传入一个不会被更改的空数组，可以防止钩子被多次调用。
第一个参数
useEffect
是将被效果调用的函数。我们传入一个匿名箭头函数，在它内部定义另一个异步方法，然后立即调用这个。我们必须在钩子内部调用async函数，因为钩子回调本身不能是异步的。
在移动端(下一个!)，我们可以直接设置图像的来源标签-
< img src = " x " / >
-到文件系统上的每个照片文件，自动显示它们。然而，在web上，我们必须将文件系统中的每个映像读入base64格式，因为文件系统API将它们存储在base64中
IndexedDB
在引擎盖下。
就是这样!我们已经在我们的Ionic应用程序中建立了一个完整的图片库功能，可以在网络上运行。betway东盟体育app接下来，我们将把它转化为iOS和Android的移动应用程序!