How to retrieve a stored value using Ionic 3 native storage

Question

How to retrieve a stored value using Ionic 3 native storage

Hey there,

I recently attempted to implement code from the Native Storage plugin documentation found at this link: Native Storage

    import { NativeStorage } from '@ionic-native/native-storage';

constructor(private nativeStorage: NativeStorage) { }

...

this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
  .then(
    () => console.log('Item stored!'),
    error => console.error('Error storing item', error)
  );

this.nativeStorage.getItem('myitem')
  .then(
    data => console.log(data),
    error => console.error(error)
  );

Upon launching my android simulator device, the console outputs the following:

[00:02:01]  console.log: Item stored!
[00:02:01]  console.log: [object Object]

https://i.sstatic.net/qYTKh.png

I am currently seeking a solution to retrieve the stored information. My goal is to leverage data stored in the native storage for conditional logic on another page, but I am facing challenges with retrieval. For instance, I intend to execute a function if the value of "Vibrator" stored in native storage is true. Can anyone provide guidance on how to achieve this?

Appreciate your support!

angular typescript cordova-plugins ionic3 cordova-nativestorage

Answer 1

Answer №1

If you want to retrieve the data, use this syntax:

console.log(info.property);
console.log(info.anotherProperty);

For more detailed information, kindly check out the plugin repository on GitHub: https://github.com/TheCocoaProject/cordova-plugin-nativestorage

Answer 2

If you want to retrieve the data, use this syntax:

console.log(info.property);
console.log(info.anotherProperty);

For more detailed information, kindly check out the plugin repository on GitHub: https://github.com/TheCocoaProject/cordova-plugin-nativestorage

Answer 3

Answer №2

Attempting to obtain the value in this manner is not effective due to it being an Async operation. Merely attempting to copy/paste the code from the documentation is not a practical use case. It serves only as an example.

For a more realistic scenario, consider following this example for storing the value:

my-storage-page.ts

this.myStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
  .then(
    () => console.log('Item successfully stored!'),
    error => console.error('Error while storing item', error)
  );

Subsequently, on another page or component, you can retrieve the stored value with the following snippet:

my-retrieval-page.ts

this.myStorage.getItem('myitem')
  .then(data => {
      console.log(data);
   },
    error => console.error('Error retrieving data', error)
  );

Note: If you require additional assistance, do not hesitate to reach out.

Answer 4

Attempting to obtain the value in this manner is not effective due to it being an Async operation. Merely attempting to copy/paste the code from the documentation is not a practical use case. It serves only as an example.

For a more realistic scenario, consider following this example for storing the value:

my-storage-page.ts

this.myStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
  .then(
    () => console.log('Item successfully stored!'),
    error => console.error('Error while storing item', error)
  );

Subsequently, on another page or component, you can retrieve the stored value with the following snippet:

my-retrieval-page.ts

this.myStorage.getItem('myitem')
  .then(data => {
      console.log(data);
   },
    error => console.error('Error retrieving data', error)
  );

Note: If you require additional assistance, do not hesitate to reach out.

Answer 5

Answer №3

I followed your instructions precisely by adding the desired property value in "property". I inserted the code into Home.ts

this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
  .then(
    () => console.log('Item stored successfully!'),
    error => console.error('Error storing item', error)
  );

In addition, in the file parameter.ts, I included:

this.nativeStorage.getItem('myitem')
  .then(
    data => console.log(data.property),
    error => console.error(error)
  );

Upon running the simulator, I observed the following outputs on the console when transitioning between Home.ts and parameter.ts:

[10:30:06]  console.log: Item stored successfully! 
[10:30:06]  console.log: deviceready event has not fired after 5 seconds. 
[10:30:06]  console.log: Ionic Native: deviceready event fired after 4017 ms 

[10:56:17]  console.log: value 
[10:56:17]  console.error: [object Object]

I am pleased to see that I was able to retrieve the value of the "property", which is indeed "value".

Thank you for your assistance!

Answer 6

I followed your instructions precisely by adding the desired property value in "property". I inserted the code into Home.ts

this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
  .then(
    () => console.log('Item stored successfully!'),
    error => console.error('Error storing item', error)
  );

In addition, in the file parameter.ts, I included:

this.nativeStorage.getItem('myitem')
  .then(
    data => console.log(data.property),
    error => console.error(error)
  );

Upon running the simulator, I observed the following outputs on the console when transitioning between Home.ts and parameter.ts:

[10:30:06]  console.log: Item stored successfully! 
[10:30:06]  console.log: deviceready event has not fired after 5 seconds. 
[10:30:06]  console.log: Ionic Native: deviceready event fired after 4017 ms 

[10:56:17]  console.log: value 
[10:56:17]  console.error: [object Object]

I am pleased to see that I was able to retrieve the value of the "property", which is indeed "value".

Thank you for your assistance!

How to retrieve a stored value using Ionic 3 native storage

Answer №1

Answer №2

Answer №3

Similar questions

Having difficulty converting string columns/data to numerical values when exporting an Ag-Grid table to Excel with getDataAsExcel function

End the primary division post button activation within Angular 2

Does Typescript fail to recognize the "delete" operator?

Navigating with Angular 2 [routerLink] while including route parameters

Error: Unable to locate bundle.js when attempting to refresh the page with a specific ID in the URL

Using Angular2, you can easily implement property binding on child elements

Module 'rxjs/internal/Observable' not found

Displaying the Ionic loading spinner on the entire page rather than a restricted small box

Enable child classes to overwrite using either a function attribute or a method

What is the best way to create varying DOM elements in Angular according to JSON attributes?

How can you define the types of function arguments when destructuring arguments in TypeScript?

The Angular functionality is functioning correctly on Mozilla browsers, but encountering issues on Chrome

"Exploring the capabilities of Angular 4 Material for seamless page navigation

Custom Angular directive for collapsing sub menus with CSS

Exploring the use of .pipe with Angular Jest for testing

Errors occur with Metro bundler while utilizing module-resolver

Expanding Generic Interfaces in Typescript

The scrollbar track has a habit of popping up unexpectedly

"Encountering a TypeScript error when using React Query's useInfiniteQuery

Troubleshooting: Issues with Angular 2 Cross-Domain Calls on Local Servers