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

ionic-team · Aug 30, 2022 · 5fd7ce4 · 5fd7ce4 · vercel · Aug 30, 2022
1 parent d415947
commit 5fd7ce4
Show file tree

Hide file tree

Showing 30 changed files with 90 additions and 90 deletions.
diff --git a/docs/angular/your-first-app.md b/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

diff --git a/docs/angular/your-first-app/2-taking-photos.md b/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:

diff --git a/docs/angular/your-first-app/4-loading-photos.md b/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...

diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/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:

diff --git a/docs/angular/your-first-app/7-live-reload.md b/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. 💪
 

diff --git a/docs/react/your-first-app.md b/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

diff --git a/docs/react/your-first-app/2-taking-photos.md b/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';
 ```
 

diff --git a/docs/react/your-first-app/4-loading-photos.md b/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();
 }, []);

diff --git a/docs/react/your-first-app/5-adding-mobile.md b/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);
 };
 ```
 

diff --git a/docs/react/your-first-app/7-live-reload.md b/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:
 

diff --git a/docs/vue/your-first-app.md b/docs/vue/your-first-app.md
@@ -32,7 +32,7 @@ Highlights include:
 
 - One Vue-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-vue).
 
@@ -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

diff --git a/docs/vue/your-first-app/2-taking-photos.md b/docs/vue/your-first-app/2-taking-photos.md
@@ -20,7 +20,7 @@ We will start by importing the various utilities we will use from Vue core and C
 import { ref, onMounted, watch } from 'vue';
 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, create a function named usePhotoGallery:

diff --git a/docs/vue/your-first-app/4-loading-photos.md b/docs/vue/your-first-app/4-loading-photos.md
@@ -6,21 +6,21 @@ 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 at the top of the `usePhotoGallery` function in `src/composables/usePhotoGallery.ts`:
 
 ```tsx
 const PHOTO_STORAGE = 'photos';
 ```
 
-Next, add a `cachePhotos` function that saves the Photos array as JSON to file storage:
+Next, add a `cachePhotos` function that saves the Photos array as JSON to preferences:
 
 ```tsx
 const cachePhotos = () => {
-  Storage.set({
+  Preferences.set({
     key: PHOTO_STORAGE,
     value: JSON.stringify(photos.value),
   });
@@ -33,22 +33,22 @@ Next, use the Vue [watch function](https://v3.vuejs.org/guide/composition-api-in
 watch(photos, cachePhotos);
 ```
 
-Now that the photo array data is saved, create a function to retrieve the data when Tab2 loads. First, retrieve photo data from Storage, then each photo's data into base64 format:
+Now that the photo array data is saved, create a function to retrieve the data when Tab2 loads. First, retrieve photo data from Preferences, then each photo's data into base64 format:
 
 ```tsx
 const loadSaved = async () => {
-  const photoList = await Storage.get({ key: PHOTO_STORAGE });
-  const photosInStorage = photoList.value ? JSON.parse(photoList.value) : [];
+  const photoList = await Preferences.get({ key: PHOTO_STORAGE });
+  const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];
 
-  for (const photo of photosInStorage) {
+  for (const photo of photosInPreferences) {
     const file = await Filesystem.readFile({
       path: photo.filepath,
       directory: Directory.Data,
     });
     photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
   }
 
-  photos.value = photosInStorage;
+  photos.value = photosInPreferences;
 };
 ```
 

diff --git a/docs/vue/your-first-app/5-adding-mobile.md b/docs/vue/your-first-app/5-adding-mobile.md
@@ -58,11 +58,11 @@ Next, add a new bit of logic in the `loadSaved` function. On mobile, we can dire
 ```tsx
 const loadSaved = async () => {
   const photoList = await Storage.get({ key: PHOTO_STORAGE });
-  const photosInStorage = photoList.value ? JSON.parse(photoList.value) : [];
+  const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];
 
   // If running on the web...
   if (!isPlatform('hybrid')) {
-    for (const photo of photosInStorage) {
+    for (const photo of photosInPreferences) {
       const file = await Filesystem.readFile({
         path: photo.filepath,
         directory: Directory.Data,
@@ -72,7 +72,7 @@ const loadSaved = async () => {
     }
   }
 
-  photos.value = photosInStorage;
+  photos.value = photosInPreferences;
 };
 ```
 

diff --git a/docs/vue/your-first-app/7-live-reload.md b/docs/vue/your-first-app/7-live-reload.md
@@ -125,7 +125,7 @@ Remember that removing the photo from the `photos` array triggers the `cachePhot
 
 ```tsx
 const cachePhotos = () => {
-  Storage.set({
+  Preferences.set({
     key: PHOTO_STORAGE,
     value: JSON.stringify(photos.value),
   });

diff --git a/versioned_docs/version-v5/angular/your-first-app.md b/versioned_docs/version-v5/angular/your-first-app.md
@@ -29,7 +29,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).
 
@@ -81,7 +81,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

diff --git a/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md
@@ -19,7 +19,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: