Easily use Protected Local & Session Storage, Save List, Get Count etc.. in .NET 8 Blazor - The BEST

hey everyone welcome back to net code Hub  channel I am Frederick and I'm happy to have   you here today in this video we are going to  talk about browser storage and if I talk about   browser storage I'm talking about local storage  and session storage local storage and session   storage are two web storage options available in  modern web browsers to help web developers store   data locally within the users browser they have  similar purposes but with some key differences   in terms of lifespan and intended usage so in  session storage and in local storage what are   the differences between let's first talk about  local storage local storage is a type of web   storage that allows data to be stored locally  in a users browser this means the data persist   even after the browser is closed or reopened  example of this could be let's say you have   an e-commerce app now user can just go in there  and add items to cut now when the user add items   to cut you can store these items in the local  storage of the browser when the user closes   the browser and open it again as soon as you  use the local storage the items added to cat   which was stor in the um local storage will  still be there but in the session storage it   is off so session storage means when the new tab  is open data can be stored for that session when   this tab closes the session storage also gets  cleared So within the two you decide which one   you want to use do you want to maintain per  the data after the browser is even closed or   you want to clear the data when the tab or the  browser closes then you can choose between the   local storage and under the session storage now  with my extension of local and session storage   it has made it more easier to work with it why  am I saying that in this video I'm going to show   you I'm going to prove to you the reason why I'm  saying that my extension is the best let's have   a look before we Dive Right into this I do offer  training session to people who are interested in   net Technologies talking about Blazer assembly  um interactive server assembly auto and Etc and   I'm Blazer hybrid and also Mari web API as well  I nearly forgot that yeah so if you're interested   in it check the video description I have an email  in there you can write to me through it so we're   going to create um a project here for Blazer  web app now this app can be used for all the   interactive mode we assembly interactive server  um we assembly and also the auto render mode okay   so let's use the Blazer web app and now here I  have a project named demo Blazer local insertion   storage so I'm going to click on next to create  this when I'm done with this the source code of   this project available at GitHub so if you want  to um grab it and review you can just check the   video description and you're going to find it  in there okay so let's create this project now   I have interactive um server in here selected  you can choose web assembly can choose Auto it   it works and any of the mode that you're going to  choose let's click on create to get this project created so now that we have the project created  what we're going to do here is we're going to   install these two packages actually the exent of  all these two packages have the same interface   but different implementation so once we look at  one you can use the same thing to the other one   that's the reason why I'm combining local storage  and our SE stor together if you understand one   you can use the same concept and apply to another  one is very simple okay so let's have a look right   on dependencies and now Les man to get packages  we're going to install these two packages click   on the browse TP and here type in net code so  here we're going to install session storage and   now the local storage as well so while this is  being searched let me take this opportunity to   actually um explain more to you now with this uh  package or with these two packages that we have   you can decide to protect it now if I talk about  protection is about encryption so the content   that you want to store in the session or the local  storage this app is um it has a feature to encrypt   it only if you want to if you don't want to it  has a way of also implementing it so you can use   protected and now unprotected okay I'm going to  show you again so now that we have this uh this   are the packages that net code have has for now  okay so I've made a video on any of this so if   you haven't watched any if you don't know how to  use any of this Che description I put the playlist   in there you can just watch any and follow okay  so this time around you want to install these two   packages net code hub. packages. extensions. loal  storage so let's install this package first the   current version here is 1.0.0 click on install and  get this project installed this package installed yes so this has been installed now let's also install  the other one and that is a session storage the St 1.0.0 okay so these packages have  been installed successfully if you   want to actually check we can go to  our project in here here check our   dependencies uh packages and we're going  to find these two packages in here let's   bu this project to make sure that everything  is in line and then we proceed on the next stage so now the project have built successfully  what we're going to do here is we're going to   add the service of this to the program.cs so  go to program. CS file and now in here let's   first add a name space so this is going to be  using net code hub. packages dot extensions   we have local storage and now we going to make  a duplicate of this and change this to session   storage so after adding this name spaces we  going there to add a service so we're going   to say builder. services do add net Cod Hub  look at storage service then and another one for session storage service so add these two Services if you want  to actually use only local storage then you   add the local storage service if you want  to use a session storage then use a session   storage service in here okay now that we are  done in here what we're going to do is let's   go to our component Pages then home Razer  we going to add this in there before that   let's make this page as interactive so  let's set this random mode as interactive server okay and let's using  net code have. packages extensions. local storage then we do  same for the session storage as well   aside from that let's inject I local  storage service let's say this local storage then we do the same for the session story so I sessions um storage service  then we have here session storage service so we have the two interfaces here  injected now in here let's set let's have our   code section in here we're going to have  a button so maybe let's have this button so in here this is what we are doing we see that  we are having a beted button in here and we have   it as unclick so the name here is set string  so you want to set this string to the local   storage and now here we're going to say local  storage dot so this um interface has a lot of   implementations as you can see from here now  you want to get one by one so first of all you   want to save let's say so do save SA save item as  string aing so this interface is or this method   is used to save only a string to the local St  so let's say this is net code Hub okay so we   are saving this you must have and wait so it's  saving as a string so you're passing the key and   now you're passing the content that is all so  when we save this let's run this and check it out all right so the app is ready now I'm  going to increase this right click on this   go to inspect element now we going to set item  to local storage so you go to you choose for   application then you can have um local storage  in here so if I click on this you will see that   we have the key then we have the content  in here you see so we can now set um item   to local storage now this just a string so we  pass in and and that is all passing the key and   the content and off your go okay now let's see  the next one is you want to get the same string   so in that there's also an end point and that  is what get item as string Asing all that you   need to do here is pass in the key and now with  this we need to set so this is going to return   a string so with this string as you can see  it's going to return a string so we have to   create a property in here and that is going to be  string content and now let's specify this content here so we call the the the output of  this um um method is going to be stored   or um assigned to this now let's  save this and now let's reload this application all right so let's see now if I click  on get string we have to retrieve the value from   the local storage using the key that we provided  so we have to retrieve this net code Hub and I'll   display it in here so you can see we are having  this in here so that's a look storage you see here   this local storage now let's have a look on the  session storage the same thing we can also have   the same method for the session story okay so  with this we can um just grab this or even with   this set string instead of save as string async or  instead of using this local storage service we're   going to use SE storage and it has the same method  so instead of this item to the local storage it's   going to set it to the SE storage now the same  thing applies to this one we want to retriev it   from the session storage so it is possible by um  using this session storage CU it is very simple   you see it they are similar yes let's review  this and apply and now let's have a look on that okay so I click on this go to inspect  elements and the same application we go to   inser of locer We Now go to session click  this cently you see key and the value is   empty set string now can see it is it is  here in the session storage get string you   you see we have it in here so you can  see it is the same just that here if I   open a new tab with this let's say I copy  this if I open a new tab in Here and Now   access the content of this right click  on this and go to inspect element go to session so application go to session you  can see here it is off right nothing is   there but let's say let's change this  to Loa we're going to change this to looka so this is looka in here and let's changes now let's rerun this so now have a look I'm going to right click  on this now we're going to use the local St so   from the application this might be here because  you're going to be using it most Now set string   to local St session so Lo now we have this in here  I'm going to copy this open the new tab and now   access this so right click go to the same inspect  element then go to application and session Lo   can see the local say it is still there right so  that is the differences between the local and the   session session gets cleared as soon as you close  a tab by local persist it's still there so based   on this you choose what you want to do it okay so  let's go to the next one that is certain item as   strength for both loer and session the same thing  applies to encryption if you want to protect this   maybe you don't want this key or this value to be  seen or to be read by the user both the SE and now   the loer how we're going to do it it's the same  um method that we're going to be using by this   time we're going to twist a little bit let's have  a look so with this for encrypting or for this   encrypted one instead of this we're going to save  or use another one so do save as encrypted string   ASN so this method is going to encrypt it then the  same thing okay going to encrypt this content and   I'll get it saved in local storage now if I want  to get it I have to use the same loate so get item   as encrypted so let's see so get encrypted  item as string as sync now let's have a look so now we are in the local storage I'm  going to click on set string now can   see it has encrypted the net code up  to this now see get string it has now   it's going to decrypt this and I convert  it into a normal string and I'll display   it in here it's working let's have a look  on the next one and this is going to be   the session storage right so for session  storage let's set this to session as you know save this and I'll run this so now let's Che this out to we're going  to encrypt the content and now save to session   storage now that is a session storage in here  we're going to set string and now it has been   encrypted so when you check the loas you can see  it is a same thing session stor the same thing   in here and now get string and this is getting  from the session storage yeah you see this is   nice isn't it so it has skipped all the stretch  that you need to go through to enip this and also   decrypt it and do a whole lot okay it's made for  you now let's go to the next one now what if in   case you have a model and you want to save it to  local storage so normally if you want to save a   model to local storage you know local storage or  session storage cannot hold objects or models so   you need to convert it into a string and now  within the string can now save it in there you   can decide to encrypt the string or save it  um unprotected way okay so let's have a look   now I have a model known as an entity it has ID  name and email now I want to create an instance   of this so here I'm going to create entity and  now entity is equal to new okay now I'm going   to say entity not this one one the instance so  entity. ID and this ID is one then I have entity. name so we have enti do ID and that is one that   is this one let's say we're  going to so have same entity. name and this name is net code Hub so we have the next one entity. email and  let's say this is net code Hub at gmail.com so   so we have this model created we have um  instance initiated in here and I in that   we have values for each of the property in it  you see this okay so now that we have this one   let's see we have there is a task okay so this  must be in an async task and let's say set model so we create a method ass set model okay  and let's also have so in need that we   have this class initiated outside of this  so entity entity new entity and now what   is it saying this could not be found  yes because supposed to be here okay else what again so canot be found in here yeah  it is found now okay so now with this aside from   that we can have Asing task get model okay and now  with this get model we're going to have a class to   handle that okay so first of all let's say this  so you want to set this uh to local storage and   um you want to set this to maybe um s St as well  okay so you're going to say that await local   storage service do set not even save item you can  see from me we have save item as model async so   now within this one it needs two parameters it  needs a key and that is a key and now it need   the T value and that is an entity that we talking  about so let's make sure this is not there because   that's not what we want okay so that is all now we  want to get this so we can just copy this we say   local storage service dot get item what here item  as model async okay so in here it needs a t value   because it's going to convert this so T value here  it is an entity and what is the key the key is the key so this is the key now this must be another  weight and now it's going to return a t value   so when you check this it's going to return T  value this one you see so that's an entity so   with this entity we must assign this entity  in here okay so it is equal to the output of   this we assign it in here so first of all  let's get this let's set to local storage   then we're going to run this again and I  make sure we get it from the local storage   now with this entity let's come here UI and  now let's display so I'm going to duplicate this for the sake of you going to get tab to grab  it that Reas why I'm commenting them okay for review so I'm commenting this one and the next one   here that is a set model and I get  model so copy this and that is set model then we have get model okay and now we want to display the  content here so we're going to say that at entity do ID okay then we have that name so  we can put this in Span we going to have a class maybe you can put this in a div let's have maybe um margin 2 p three we have our div then this container here is   going to surround this okay  so maybe going to have our ID then at the end we're going to break this we're  going to have the name so I have to just grab this and okay so this is going  to be name then you have the email okay so we have ID name  and email and that is what we   are going to display in there so  we grab this and this is email okay all right so we have  this and let's run this and see so you can see that when the app initializes  ID is zero name is now and email is now because   you haven't said anything to loc St it now we  open the local storage and now we're going to   set this model it's going to convert into a  string and I save it in here let's move the   old one now if I click on this set mod can see  we have it in here so ID like you see you have   the ID the name and on the email right good now  from this get model it is it has already assigned   it in here so this is what we can do we can  create another instance here this N1 and assign this let's say this let's assign this with  this one then okay so this entity that's   where we assigned it to the response all  right now we can rerun this and check it   out okay so if I check the lookas you can  see we have content there already we have   this now if I click on get mode going to  get this one and I display it in here so   get model we have an issue here let's have  a look so a wait okay so this is encrypted   item as we don't want this encrypted for  now so you want this get item as Model A sync okay so let's check it out get  model and I could see we have it   okay now out of the encryption yeah  we've done that already so you can   actually try your hands on it okay so  quickly this what going need to do so save let's have a well oh yeah so save as I think I need to make  a choice from this so you can see we have save   as encrypted string we don't want that you  want save as encrypted item as model async   we specify here the T value and that is a  custom is a custom or entity so entity and   now we going to specify the key and now the  the value in here now the same thing applies   to this one so we have get encrypted item as  modu a sync specify the T value and and that   is it you're good to go save this rerun this  so now we are going to encrypt this now I'm   going to clear this off click on set model and  I can see it has been encrypted as you can see   from here get model it are going to decrypted  and now we're going to have the content okay   the same thing applies to session storage  so we can just copy this and now we going to let's set this so once  you have this local storage   so we want to have session storage this what we want okay so we have entity here  already so we need not to use the same entity okay so you can see from here we a session  storage session St and that is it one that is it   let's check it out so we go to the session and  now we're going to CLI let's open the session   and leave the look after it so set model you  see that encrypted and I'll get is getting   from the session okay so we have one method  or one interface in this left and that is the   list okay um so let's say when you have an an an  e-commerce if you have anything that you want to   be adding creating a list and I keep the list in  the local stage or the session storage while the   new data comes in this list will be updated  and now be kept in the local storage or the   session storage I added this feature for you as  well okay so let's see how to work with that so   within this this is what we need to do as you  can see we have a list of entities and that is   a model that we created aside from that we when  the button is Click set list model we as you can   see we assign values to the properties in this  list aside from it you can see local story. add   item to list so here you haven't declared any list  list is going to declared automatically by the T   value that you're going to provide in here okay  so you're going to have a list now if it is the   first time of you adding to local storage it's  going to check if it is available if we have any   list available is going to get it and and add it  add the current one to the list and also assign   it again in case it does not get any list it's  going to instantiate this one create a new list   add your Modo to the list and our ass sign so all  these works are done for you all that you need to   do here is to call loc to service. add item to  list specify the T value specify the key and add   the model that you want to do so let's say this  is an e-commerce app and the person has clicked   on to add this item to the cat all that you need  to do specify the item the model the key and the   current content or the model of all the cut  item and I'll assign it forget about the list   is going to be created automatically for you  okay by using this package that's nice let's   our hands on this now aside from that you can see  we are getting the list from the local stage so   we get the list specify the T value is going to  create a list you're going to get the list from   the local storage and assign it in there as a  list to this list that we have created okay and   here we are looping through this as you can see  if it is not equal to now we are going to Loop   through and now um display the item in the list  so when you have three items in that list you're   going to get them displayed all right let's save  this and now let's run it and check it out so I   click on this go to inspect elements and in here  from the application local storage we're going   to C this and if I click on the set item to the  list so you can see we have a list in here that   is the first one if I click on it again let's  say I have another one that if I click on it   again let's see so you can see it has been added  click you can see it has been added or it keeps   adding the same item to the list if I click on  get list you see we have all the items in here   it looks through them and now it set a model for  it that a t value and I populate it and I return   so if I click on set again if I CLI on get you  must have one added set get another added set   get and add as you can see the list here also  update um automatically as soon as you click on   this yes so that is this one let's have a look  on the session storage how do you implement the   same thing in the session storage so in that  it is the same okay I'm going to command this one and now uncomment this this  is the session storage it is same   thing the same end point that  we are using change it to the   service that you created and that  is all let's run this and check it out let's switch to the SE storage from the  application tab SE storage and now in here   set list you see we have it in here from the  session and I can add more and I get I have   the same thing that's the same okay now let's see  the next one is the protected can we protect this   list yes we can let's have a look so when we  check here we have the same thing so look at   search service. add item to encrypted list this  going to encrypt it and now we say look service.   get encrypted item list so it's going to also  get the same thing as you can see all that you   need to do here is specify the T value and now  the key very simple okay let's check this one out so from the local storage now we're going  to encrypt the list so let me clear this one   now set you see has encrypted it is encrypted  have you seen yes so set encrypted and we keep   adding keep adding now get decrypt it and I get  the same content yes very simple too let's see   from the session storage so I'm going to  comment this one then un comment this cuz   this one is a session and now just reing the  session session here that is all let's build this so let's see now I'm going to clear this  one you go to the session and that is this   click on this we have it in here okay so with  this we did not use the encryption watch have   you seen yes so that we need to do here is we  have to specify this get encrypted and that is all so let's inspect application and now  session storage so can see is encrypted now   keep adding keep adding click on get list and  we have all the list in here here you cannot   read is encrypted yes okay now I think we have  some left yes let's see I'm going to comment this we also have one method that is known  as get count so for that you can have your   ASN task then this is get count so within this  you can have a we Locas service dot get count   let's see if we have get count async okay so  this get count async what you need to do here   is specify the T value and that is entity  and I specify the key and here the key is   the key so let's remove this one now this is  going to return an integer when to check this   so we need to let's say this is count and now  we're going to assign this count in here okay   so get count it's going to get count from  the local storage and I'll add it now you   can also do same for the um SE storage so get  SE storage count and now with this we're going   to have session storage get items count so going  to work okay and last one we have asent task and   that is delete item so delete item all that you  need to do here is a wait local storage service   do delete item and now this item needs a  key so specify the key is going to get it deleted and we also have one and  that is known as clar or so clar   storage so here we have CLA story  so this we need to use dot Clare or so that's CL or item as sync and with this  you don't need to specify key okay you don't   need any key here now the same thing applies to  the local um searing storage you can also delete   item so maybe you can make it local item and this  says clear local storage and we can also copy this and I'll P it here and  I in the loal delete session storage yes so this going to show CLE the  session and you make sure you change this to to session yeah that's what I need should do  let's try one here and see let's try the   get count from the local storage so when  this button is clicked you want to get count I'm going to comment this then on top  here I'm going to say at count I'm going to say here count okay so count is equal  to this now this is get count all right now let's see so let's run  this and check this out so you can see that   the current count here it is zero now if I click  on this go to inspect element and here let's see   application and you go to local storage now  nothing is here okay so if I click on even   get count it is still zero in case we have item  set here we're going to have it count in there so   let's quickly do that and in here there's  also one I forgot this get encrypted item count so that is this one get encrypted item  count specify the T value and that is all so   here this is what you need to do now you cannot  use local stage from the unprotected one and I   want to get this this it willon work because  it's going to decrypt it and and and now get   a list out of this while this doesn't need  to be decrypted so you make sure you use   the right one for the right one okay and that  is get encrypted count so try hands on this   and and thank me later on okay yes okay so  let's see now let's focus on this we first   have to when the page loads maybe we can call  a service or we're going to have a button in this there is going to be an ASN task add item to Loca and a with you're going to  have LCA SE service dot let's say   add item to list add item to list  now this list you specify the T   value as entity and now the key it is  a key the content here it is an entity one entity one yes now this entity here is what  we Define here so before we add we can just grab this okay let's UNC comment now add item to local copy  this and in here we can have a button and I call this as add item to Loa okay okay now let's run this so you want  to check whilst we add item or res set item   to local storage application local storage so  add item we have it in here get count is one   add item again this must be two right yeah so  we have three now get count is three add item   four get count is four get count 4 four add item  add item add item six or seven yes add item 8 add   item 13 or 11 yes so it's working all right so  this package or these packages are useful right   so try using these packages in your application  to skip type in a lot of bunch of code to um do   this have done already and now get them using  the application all right thank you when you   use it and you have any issue to you put it at  the comment section and I will attend to you   or you can just write to me through the email  specified in this video description all right   thank you so much for watching if you want to  grab this house code to check um to um review   check the video description it will be available  all right catch up again till then take care

Channel: Netcode-Hub

Views: 709

Keywords: web assembly, .net 8, .NET 8, API, Develop, Blazor, WebAssembly, implementation, controller, .net blazor, nugget package, create package, install package, download, clipboard, clipboard in blazor, copy in blazor, read clipboard in blazor, validation, form validation, modal dialog in blazor, file upload in blazor, clean arhitecture, domain, application, jwt authentication, consume authentication, localization, change language, local storage, session storage

Id: jY-2nR7JLcY

Length: 44min 17sec (2657 seconds)

Published: Sun Mar 17 2024