React Native - AsyncStorage

async storage is a persistent key value storage system that is globally available on your application which means that you can access that storage from any screen it's not like react native states so that that states are managed by the components itself and available on that component but the storage is available throughout the application just imagine you are developing a web application with the local storage and similarly the storage is persistent which means that even when you close your application and when you relaunch your application you can read that storage and you can access the storage and you can display the data from that storage which means that storage is not temporary it's not at the memory level it's available whenever the application is installed and used to clean up the storage we normally go into the application settings and then we clear the data or the cache of the application and that storage is actually wired out on os async storage is actually backed by native code that stores small values in serialized dictionary style and for the large values it actually uses the separate files for android uh async storage actually uses the uh roxdb or sqlite based on which one is available on the phone so async storage actually is the api that actually interact with the local storage of your phone and store some persistent data let's see as a small example there are many usage of async storage but one case study is that when we need uh async storage what's the reason that why we need to store data one thing is that when we store some data on async storage we use minimum data we don't store the large data large files and the huge text and the videos in the async story we don't do that because it's just a key value paired dictionary style storage one example is that when you install the application let's say for example when you install the facebook application first time so when you install the facebook you input your username and the password and you authenticate your application and you see that the first home page or the news feed and so on so when you close the application and when you even reboot your uh device and when you relaunch your facebook app uh it does not ask you to input the username and password again and whenever you launch the application it never asks you because uh it can authenticate and then later on it can store that authenticated token depending upon what kind of mechanism is used by the facebook and the other applications so simplest example is that let's say for example you store the username and password in the storage but that is a async storage that is attached with this application and whenever you launch that application again after the authentication later on after two days and rebooting your phone and then you relaunch your application so you can make a kind of a mechanism in your application that first you look into the storage and you read the username and password and anything what kind of data is stored you read that data and if that data is available you can authenticate and later on seamlessly you log in that user into your application and then you can bring data from the server and so on so this is one of the example of the async storage but that async storage can be used in a variety of scenarios but the thing is that it will remain with the application if let's say for example you want to uh clear the data you just need to go to the settings of your phone and then you can select the application and say that clear cache and it will wipe out all the local storage and then your application will become just like it is installed for the first time if you search for the async storage the first thing that you will get is the react native documentation for the async storage and if you see that it's duplicated and you need to use react native community slash async storage so if i navigate here to the react native community async storage it provides some guidelines but it's not specifying over here that either this guideline is for the react native cli or the expo cli project so uh for the supported platforms if you see that it's supported for the android ios and the mac os etc and from this that key value storage the persistent key value storage for the react native so i assume that this guide is for the react native cli and this actually does not work with the xlcli so if you are working with the react native cli we need to install with the yarn add or the npm install you need to install this package and then uh if you are working with the react native 0.6 and the above version uh it will do the linking with the native storage and you need to do the installation of this cocoa parts and if you are working with the lower version you need to first unlink and you need to follow these these guidelines and then you need to import the async storage in this case you need to import from the react native community async storage and rest of the process is same as in react native cli in expo cli to work with the expo cli you need to specify that you are looking for the async storage for the xposed cli projects so when you search with the for the xbox cli async storage you will get the docs for the xo expo dot io and here you will find the guideline to work with the async storage so it's uh the same the rest of the thing is the same but the import is a different so if you're working with expo cli you need to import uh async storage from react native just like other components like style sheet view text button and other react native components so you need to import async storage from this and then rest of the documentation is similar to the reactant cli that the common methods that we use with the async storage is set item and the get item right so let's see how we can do this demonstrate async storage i have created a very simple snack uh at snack dot expo dot io and it has only two buttons which is the save data and the load data and to work with the with because this is uh x5cli so to work with the xbox cli we need to import async storage for from the react native right and here i have two buttons for the save data and the load data and i have created two two functions over here which are arrow functions save data and the load data so to save data i need to use set item so set item is something that is used to to store the item into the persistent storage so let's save data so i will use async storage dot set item so set item actually takes three arguments the very basic arguments are actually two in which you specified the key store or the key and you will use that key to uh store the to to store the data and to retrieve the data so let's say for the key that's key for item and this is the data of the item so and normally when you see the documentation you always see the uh async and await so that this set item and or the storage and the retrieval should be asynchronous and will not wait for the application to uh to to do some work so it will be doing in the background so let's first demonstrate without acing it actually works without async that's not a problem so i will discuss that what's the difference if you use the async and you don't use async so async storage dot get item when you see when you say that i'm going to get the item i need to specify the key against which key i'm going to retrieve the item and in this case it returns me the promise so let's say for example if i say that i'm going to get the item over here and let's console.log the item let's see what we get so if i it's automatically saved so if i press save data it should save i can add some console messages so that it's it can it can show me that it's performing a save operation and similarly if i do this i can write the load operation as well just a message all right so if i save data i can see the log saying saving and saving done and if i now load the data it's saying loading and loading done so you see that it has loaded something which is actually uh an object and that object is actually the promise so we we don't get data if we don't use async and wait so if if i don't want to use asynchronous i can further go and say that after retrieval i can then get the item let's say for example i can say let i is item and i can say console.log i over here so i can make it in two lines so after this it's just like a fetch in javascript so fetch returns the promise and then you need to find the object and then after that you can perform whatever you want to with that object so if i remove this and save if i say this is actually overwriting this key for item and i'm loading over here you see that i returned the uh you have the promise over here and you also have the data of the item which means that i can just comment this out and if i save data and if i load data you see that the data of the item has been shown although it's shown the later on and it's executed and this console is appeared first and then this item appeared later on after this in the console so uh you need to perform then so if i use async await i get the promise as well as i get the data so if i use async await i can get the item over here and if i remove this and if i just load the data because it's already stored so it depends how we get the item so i'm using async await for the getting the item because data is already there in async storage so data of the item has been shown over here so normally when you see the documentation you see a practice over here that you provide a check over here that if it's not null then you retrieve it's a good practice so that you specify and we should check that either this item is first set or not there is a possibility that you are loading first without storing the data so that's how you can put the key normal practice people are using and the documentation you see that it's using the add the rate sign to specify the store that's it for example i am specifying store one colon let's say key and i can use that key over here so this can this is just a string so it can be used whatever the way you want so it's giving a a nicer sentence look that it's a store one and then in the store i'm using the key over here and then i'm going to store and retrieve the data save data and i'm going to load data so i'm loading that data so when you are setting item with different keys are maintained in the persistent storage and we can view all those keys with the help of get all keys method with the async storage so async storage dot get all keys and i can get the keys in the form of in the array string array so let's see for example keys is [Music] and i will console.log and see the keys so i will just comment this out for the moment and i can load data and you see that we have these keys which is store one key and this was the key that we use earlier and this is the array and this array will keep maintaining and keep adding let's say for example if i say store two let's say data for store two and if i save data and if i load data you see that we have another store two over here so these keys are actually maintained and we can also create the keys with the help of async dot clear method and i can clear all those keys so if i save data this time i'm not saving anything i'm just clearing the async storage so it's done and if i load data we don't have any keys which means all the data has been wiped out with the help of async dot clear we don't always store just the string as a data there can be that can be a complex object and let's see how we can do this so i will just comment this out and uncomment this one all right so let's assume that we have uh store one and in this we have uh user is actually the key and in this case we are storing the uh the object where we have a username let's say for example that can be later on come from the user input so let's say for example this is the username and we have the password and this is somehow the password this is actually the simple password over here and in this case we are going to store this object for this key so we have the store one dot user which is the key and we want to retrieve that another thing is that we can also make this async await so that asynchronously storing data when dealing with the persistent storage so storage is the data that we are storing is quite small so it's not it will not make much of a difference if we don't use async await so if i retrieve this data and i want to show this data so i am going to save first so you see that something actually went wrong it's not storing this object over here and if i load this data i'm getting null which means that it's not storing it's unable to store this data the problem is that it's a json object so when we are dealing with the async storage we need to convert this uh any kind of string with the help of json stringify so when you're storing the objects we will be using json stringify and in that case we will send the object so it's coming in the second line so this is the object that we are going to store so let's bring it in second line so that we can see that what's happening all right so second argument is the object that we are going to store and in this case we want to store with the help of json string file so now let's say if i save this it's saving it's done [Music] when i load i'm getting the object over here all right so i'm assuming that if i get the item so i can say that i want to see the username so if i load the item i'm getting undefined over here because when you stringify and you store the object you need to pass that object with the help of json so i will do json.parse and i need to parse this right and then after that it it will convert into the javascript object and after that i can use username like this so if i load data so this is the object so if i load data it's not loading so let's do that again if i save data it's done if i load data it's not retrieving that data so i can make it in two ways so that should not create confusion so let's say for example data this onload parts this is the item and i can say this is the data that i am retrieving so this is the data this is json object i can check the type of this this is the object and you are getting the username similarly we can get the password as well load data so this is the password that's how we can store the entire object and then we can retrieve the object and we can retrieve through the json parse

Channel: Code Synergy

Views: 3,802

Keywords: AsyncStorage, react native cli, expo cli, installing asyncstorage, storing js object, stringify, json.stringify, storing data, react native, persistent storage, saving username and password

Id: 3_MsLfQmREg

Length: 21min 52sec (1312 seconds)

Published: Mon Sep 07 2020