docs(your-first-app): Replace Storage plugin with Preferences (#2499)

Author: jcesarmobile

docs/angular/your-first-app.md

@@ -36,7 +36,7 @@ Highlights include:
 
 - One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs.
+- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.com/docs/apis/preferences) APIs.
 
 Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-ng).
 
@@ -88,7 +88,7 @@ cd photo-gallery
 Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work:
 
 ```shell
-npm install @capacitor/camera @capacitor/storage @capacitor/filesystem
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
 ```
 
 ### PWA Elements

docs/angular/your-first-app/2-taking-photos.md

@@ -26,7 +26,7 @@ Open the new `services/photo.service.ts` file, and let’s add the logic that wi
 ```tsx
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
-import { Storage } from '@capacitor/storage';
+import { Preferences } from '@capacitor/preferences';
 ```
 
 Next, define a new class method, `addNewToGallery`, that will contain the core logic to take a device photo and save it to the filesystem. Let’s start by opening the device camera:

docs/angular/your-first-app/4-loading-photos.md

@@ -6,9 +6,9 @@ sidebar_label: Loading Photos
 
 We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery.
 
-Fortunately, this is easy: we’ll leverage the Capacitor [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store.
+Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store.
 
-## Storage API
+## Preferences API
 
 Begin by defining a constant variable that will act as the key for the store:
 
@@ -21,10 +21,10 @@ export class PhotoService {
 }
 ```
 
-Next, at the end of the `addNewToGallery` function, add a call to `Storage.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved.
+Next, at the end of the `addNewToGallery` function, add a call to `Preferences.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved.
 
 ```tsx
-Storage.set({
+Preferences.set({
   key: this.PHOTO_STORAGE,
   value: JSON.stringify(this.photos),
 });
@@ -35,7 +35,7 @@ With the photo array data saved, create a function called `loadSaved()` that can
 ```tsx
 public async loadSaved() {
   // Retrieve cached photo array data
-  const photoList = await Storage.get({ key: this.PHOTO_STORAGE });
+  const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
   this.photos = JSON.parse(photoList.value) || [];
 
   // more to come...

docs/angular/your-first-app/5-adding-mobile.md

@@ -93,7 +93,7 @@ Next, head back over to the `loadSaved()` function we implemented for the web ea
 ```tsx
 public async loadSaved() {
   // Retrieve cached photo array data
-  const photoList = await Storage.get({ key: this.PHOTO_STORAGE });
+  const photoList = await Preferences.get({ key: this.PHOTO_STORAGE });
   this.photos = JSON.parse(photoList.value) || [];
 
   // Easiest way to detect when running on the web:

docs/angular/your-first-app/7-live-reload.md

@@ -91,7 +91,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
   this.photos.splice(position, 1);
 
   // Update photos array cache by overwriting the existing photo array
-  Storage.set({
+  Preferences.set({
     key: this.PHOTO_STORAGE,
     value: JSON.stringify(this.photos)
   });
@@ -107,7 +107,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
 }
 ```
 
-The selected photo is removed from the Photos array first. Then, we use the Capacitor Storage API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
+The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
 
 Save this file, then tap on a photo again and choose the “Delete” option. This time, the photo is deleted! Implemented much faster using Live Reload. 💪
 

docs/react/your-first-app.md

@@ -32,7 +32,7 @@ Highlights include:
 
 - One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs.
+- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.com/docs/apis/preferences) APIs.
 
 Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-react).
 
@@ -84,7 +84,7 @@ cd photo-gallery
 Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work:
 
 ```shell
-npm install @capacitor/camera @capacitor/storage @capacitor/filesystem
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
 ```
 
 ### PWA Elements

docs/react/your-first-app/2-taking-photos.md

@@ -29,7 +29,7 @@ import { isPlatform } from '@ionic/react';
 
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
-import { Storage } from '@capacitor/storage';
+import { Preferences } from '@capacitor/preferences';
 import { Capacitor } from '@capacitor/core';
 ```
 

docs/react/your-first-app/4-loading-photos.md

@@ -7,15 +7,15 @@ sidebar_label: Loading Photos
   <title>Loading Photos from the Filesystem Using A Key-Value Store</title>
   <meta
     name="description"
-    content="We’ve implemented photo taking and saving to the filesystem, now learn how Ionic leverages Capacitor Storage API for loading our photos in a key-value store."
+    content="We’ve implemented photo taking and saving to the filesystem, now learn how Ionic leverages Capacitor Preferences API for loading our photos in a key-value store."
   />
 </head>
 
 We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery.
 
-Fortunately, this is easy: we’ll leverage the Capacitor [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store.
+Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store.
 
-## Storage API
+## Preferences API
 
 Begin by defining a constant variable that will act as the key for the store before the `usePhotoGallery` function definition in `src/hooks/usePhotoGallery.ts`:
 
@@ -26,29 +26,29 @@ export function usePhotoGallery() {}
 
 Then, use the `Storage` class to get access to the get and set methods for reading and writing to device storage:
 
-At the end of the `takePhoto` function, add a call to `Storage.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved.
+At the end of the `takePhoto` function, add a call to `Preferences.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved.
 
 ```tsx
-Storage.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
+Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
 ```
 
 With the photo array data saved, we will create a method that will retrieve the data when the hook loads. We will do so by using React's `useEffect` hook. Insert this above the `takePhoto` declaration. Here is the code, and we will break it down:
 
 ```tsx
 useEffect(() => {
   const loadSaved = async () => {
-    const { value } = await Storage.get({ key: PHOTO_STORAGE });
-    const photosInStorage = (value ? JSON.parse(value) : []) as UserPhoto[];
+    const { value } = await Preferences.get({ key: PHOTO_STORAGE });
+    const photosInPreferences = (value ? JSON.parse(value) : []) as UserPhoto[];
 
-    for (let photo of photosInStorage) {
+    for (let photo of photosInPreferences) {
       const file = await Filesystem.readFile({
         path: photo.filepath,
         directory: Directory.Data,
       });
       // Web platform only: Load the photo as base64 data
       photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
     }
-    setPhotos(photosInStorage);
+    setPhotos(photosInPreferences);
   };
   loadSaved();
 }, []);

docs/react/your-first-app/5-adding-mobile.md

@@ -52,12 +52,12 @@ Next, add a new bit of logic in the `loadSaved` function. On mobile, we can dire
 
 ```tsx
 const loadSaved = async () => {
-  const { value } = await Storage.get({ key: PHOTO_STORAGE });
+  const { value } = await Preferences.get({ key: PHOTO_STORAGE });
 
-  const photosInStorage = (value ? JSON.parse(value) : []) as UserPhoto[];
+  const photosInPreferences = (value ? JSON.parse(value) : []) as UserPhoto[];
   // If running on the web...
   if (!isPlatform('hybrid')) {
-    for (let photo of photosInStorage) {
+    for (let photo of photosInPreferences) {
       const file = await Filesystem.readFile({
         path: photo.filepath,
         directory: Directory.Data,
@@ -66,7 +66,7 @@ const loadSaved = async () => {
       photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
     }
   }
-  setPhotos(photosInStorage);
+  setPhotos(photosInPreferences);
 };
 ```
 

docs/react/your-first-app/7-live-reload.md

@@ -91,7 +91,7 @@ const deletePhoto = async (photo: UserPhoto) => {
   const newPhotos = photos.filter((p) => p.filepath !== photo.filepath);
 
   // Update photos array cache by overwriting the existing photo array
-  Storage.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
+  Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
 
   // delete photo file from filesystem
   const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
@@ -103,7 +103,7 @@ const deletePhoto = async (photo: UserPhoto) => {
 };
 ```
 
-The selected photo is removed from the Photos array first. Then, we use the Capacitor Storage API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
+The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
 
 Make sure to return the `deletePhoto` function so it is as a part of the hook API that we expose: