Store data in the devices

Ionic Framework Ionic React
1

The reason for the consultation is as follows:

I must store information on the devices (either in browsers or cell phones) so that once they register and log in, their user is stored on the device.

How can I store data in the devices?

2

You have a few options. You can use the Storage plugin: https://capacitorjs.com/docs/apis/storage

Or you can find a sqlite plugin

Or you can use localstorage (not recommended for any serious data) or IndexedDB (also not recommended for serious data)

1 Like
3

Thanks max.

What value do I get from async getItem (), if nothing has been saved with setItem () yet?

If in index (the home page) I use getItem to get the user, and if it was not set yet (because the user did not register yet) what I would get with getItem?

What I want to do is the following. If on the main page I get null, then the user will be notified to register, if he did not register then he is shown a sign that he must do it

async setItem() {
  await Storage.set({
    key: 'name',
    value: 'Max'
  });
}

async getItem() {
  const { value } = await Storage.get({ key: 'name' });
  console.log('Got item: ', value);
}
4

If in index (the home page) I use getItem to get the user, and if it was not set yet (because the user did not register yet) what I would get with getItem?

You will get null.

What I want to do is the following. If on the main page I get null, then the user will be notified to register, if he did not register then he is shown a sign that he must do it

By checking null you can store it in a state using let[isReg, setIsReg] = useState<boolean>(false)

			<IonApp>
				<IonReactRouter>
					<IonRouterOutlet>
						<Route path="/" render={() => isReg ? <Home /> : <Register />} />
					</IonRouterOutlet>
				</IonReactRouter>
			</IonApp>
1 Like
5

Thank you for the information you provided. It was very useful.

6

Thanks.

When I try to implements

async getItem() {
  const { value } = await Storage.get({ key: 'name' });
  console.log('Got item: ', value);
}

I get:

Cannot find name ‘async’

any

‘;’ expected.ts(1005)

Cannot find name ‘getItem’.ts(2304)

So why I did is this:

export async function set(key: string, value: any): Promise<void> {
  await Storage.set({
    key: key,
    value: JSON.stringify(value)
  });
}

  async function get(key: string): Promise<any> {
    const item = await Storage.get({ key: key });
    console.log("value: "+item)
  }

But what I get is:

value: [object Object]

and if I set a return in get:

export async function get(key: string): Promise<any> {
  const item = await Storage.get({ key: key });
  return JSON.parse(item.value);
}

the return row gives me:

(property) value: string | null
Argument of type 'string | null' is not assignable to parameter of type 'string'.
  Type 'null' is not assignable to type 'string'.ts(2345)

Could you please help me?

7

If you are using this function in class then use it as:

getItem = async ()=>{
    // Other code will go here
}

You are getting error at this line:

because

JSON.parse(string)

accept string as argument and typescript tells you that the item would be null so it is not assignable to argument of type string then use this line of code:

return JSON.parse(item.value!);

or use it:

as:

export async function get(key: string) {
  await Storage.get({ key: key }).then((item)=>{
      if(item){
          return JSON.parse(item.value);
      }
      else{
          return null;
      }
  });
}

This is caused because you are not parsing the item so write it:

as:

async function get(key: string): Promise<any> {
    const item = await Storage.get({ key: key });
    console.log("value: "+JSON.parse(item.value!));
  }

If it solves your problem. Please clcik solution and hit a hurt. Thanks.

1 Like
8

Thanks @Hammadlftikhar

It works but I have a question because in the console it shows the following:

consoleLog

That is shown in the home and the saved thing is jaodev, that’s the right but why it show that code? and a 2 before Got item?

Home tsx:

const Home = () => {
  const [showModal, setShowModal] = useState({ isOpen: false });
  const [retVal, setRetVal] = useState(null);
  const [count, setCount] = useState(0)

  const axios = require('axios');

  const data2 = getLocation();

  if(getItem("user")!=null){
    console.log(getItem("user"));
  }

The function are in Storage.tsx

import { Plugins } from "@capacitor/core";

const { Storage } = Plugins;

export async function setItem(key: string, value: any) {
  await Storage.set({
    key: key,
    value: value
  });
}

export async function getItem(key: string) {
  const { value } = await Storage.get({ key: key});
  console.log('Got item: ', value);
}

export async function removeItem() {
  await Storage.remove({ key: 'name' });
}

export async function keys() {
  const { keys } = await Storage.keys();
  console.log('Got keys: ', keys);
}

async function clear() {
  await Storage.clear();
}

Also I having problem with this:

const App: React.FC = () => (
  const [isReg, setIsReg] = useState<boolean>(false);
  <IonApp>
    <IonReactRouter>
    <IonSplitPane contentId="main" when="(min-width: 4096px)">
          <Menu />
      <IonRouterOutlet id="main">
       <Route path="/" render={() => isReg ? <Home /> : <Register />} />
        /*
         Others routes
        */
      </IonRouterOutlet>
      </IonSplitPane>
    </IonReactRouter>
  </IonApp>
);

At the line const [isReg, setIsReg] = useState(false);
At const

Expression expected.ts(1109)