JS - How to STORE and USE an Array in Local Storage

Поделиться
HTML-код
  • Опубликовано: 19 янв 2025

Комментарии • 141

  • @jeff-creations
    @jeff-creations Год назад +2

    Oh wow, you are awesome. I spent so much time trying to figure out why all my user input box data was erasing from localStorage after trying to add more data after a browser refresh. Thank you so much!

  • @Bread-vk8fl
    @Bread-vk8fl 2 года назад +4

    Thank you SO MUCH!!! You were the only who explained so well and detailed how to do it and the why of each thing.

    • @MelvinAdekanye
      @MelvinAdekanye  2 года назад +3

      That's awesome. I'm super glad I could help.

  • @harrazmasri2805
    @harrazmasri2805 2 года назад +1

    i like the way you communicate towards viewers

  • @WaleedWrz
    @WaleedWrz 2 года назад +1

    Thank you, i didnt knew that i could create an array directly from the set item, i had my array in a var and it was reseting each time i clicked on my button, i was suffering for 2 days as a beginner 😂
    thank you a lot.

  • @bachbang4687
    @bachbang4687 2 года назад +1

    OMG! I've been struggling on how to update localstorage. Tysm !!

  • @MaxProgramming
    @MaxProgramming 4 года назад +1

    Wow! Just realized you got to 1K! Keep growing man!

    • @MelvinAdekanye
      @MelvinAdekanye  4 года назад +1

      It's super crazy. Thanks you to.

    • @MaxProgramming
      @MaxProgramming 4 года назад

      @@MelvinAdekanye I did not see you mentioned me. THANKS A LOT! 😍

  • @nata63514
    @nata63514 4 года назад +2

    you deserve more subs! thx so much, man.

  • @kayhmreese2113
    @kayhmreese2113 2 месяца назад

    thank you thank you thank you.. i was trying to store data from quill rich text editor into my localstorage but i don't understand others' explanations... i knew how to set and get the data but it keeps getting overwritten. so, i was looking for ways for to get the data in array and yours worked great for my rich text editor

  • @R_S_R_389
    @R_S_R_389 4 года назад +2

    What A amazing video brother...thanks a lot..

  • @tianyizhou6401
    @tianyizhou6401 4 года назад +2

    thanks alot man, this is just what I needed.

  • @nandnisharma1551
    @nandnisharma1551 3 года назад +1

    Thanks a lot you saved me from scolding by my teacher ❤️❤️❤️❤️ n keep smiling ..❤️❤️❤️❤️

  • @dekingking315
    @dekingking315 2 года назад

    thank you so much I was going crazy trying to figure it out

  • @abeilleslade
    @abeilleslade 4 года назад +2

    Very nice explanation, thank you.

  • @UkraineFront
    @UkraineFront 3 года назад +1

    Perfect for my big project, thanks!

  • @dnyl.mp4
    @dnyl.mp4 3 года назад +1

    thank you so muchh dude you helped me finish my projectt

  • @mansi_loves_kaira
    @mansi_loves_kaira 2 года назад +1

    Hey! I have a question for you. I'm making a resume maker website. For entering the details like personal, education, work experience and skills, I have made seperate html pages for each. And for saving each Page's entries, I have made a "Save" Button at the bottom. I want that when we click on the button,an alert should appear " Your data is saved." The problem is I don't know how to save it and show all the data together in the result page. Please help.

    • @MelvinAdekanye
      @MelvinAdekanye  2 года назад +2

      Hi! Here's what I'm getting. You have multiple pages so you can hit next and have it do it's thing. Saving should be quite easy! Whenever you hit next or save, store it to the local storage in an object. Hope it helps! Otherwise, email me.

  • @ankushchavhan1332
    @ankushchavhan1332 3 года назад +2

    Really helpful , Thanks 🤩

  • @elrubio8091
    @elrubio8091 4 года назад +2

    dude!!! thank you so much for taking your time and explaining how localStorage works when working with array!! i am a newbie learning how to code, so thanks a million!

    • @MelvinAdekanye
      @MelvinAdekanye  4 года назад

      No problem. Glad you found it useful.

    • @lukaezekiel9293
      @lukaezekiel9293 3 года назад

      I know it is kinda off topic but do anybody know of a good site to stream newly released series online ?

    • @jessekendrick18
      @jessekendrick18 3 года назад

      @Luka Ezekiel Flixportal

    • @lukaezekiel9293
      @lukaezekiel9293 3 года назад

      @Jesse Kendrick thank you, I signed up and it seems like a nice service :D I really appreciate it!

    • @jessekendrick18
      @jessekendrick18 3 года назад

      @Luka Ezekiel No problem xD

  • @kreen-vi7vd
    @kreen-vi7vd 3 года назад

    Thank you, this is the best explanation i found

  • @tenubar
    @tenubar 10 месяцев назад

    amazing! you're brilliant

  • @Arinze1
    @Arinze1 Год назад

    One question, i have an array if objects stored in local storage.
    And the value if the properties within each object os gotten from an input
    How do i check to make sure that certain values thatvare already existing in previous objects can't exist in a new ine

  • @angelborislavov9192
    @angelborislavov9192 3 года назад +1

    Great video ,thank you!

  • @timtech9361
    @timtech9361 2 года назад +2

    Okay but what if you have a list in your DOM and you want to populate each li with EACH local storage VALUE. how would you do that? Getting the entire array is almost pretty much always insufficient. What if you need to populate and element with ONE value from the JSON array? Any advice?

    • @mribrahim811
      @mribrahim811 Год назад

      I can help ---->
      /*
      Don't forget to add



      */
      function addDataToList()
      {
      var arr = [];
      arr = JSON.parse(localStorage.getItem('data'));
      document.getElementById("output").innerHTML=arr;
      for (const element of arr) {
      console.log(element);
      let listo = document.createElement("li");
      listo.value = element;
      listo.innerHTML = element;
      document.getElementById("uls").appendChild(listo);
      }

      }
      addDataToList();

  • @jtrickzz6959
    @jtrickzz6959 3 года назад

    Thank you, u solved me a big trouble

  • @dr.briaro
    @dr.briaro 2 года назад

    Greate video. Ive a issue though. If I want my view list vertically showed rather than inline. how do I fix that issue? thanks in advance

    • @MelvinAdekanye
      @MelvinAdekanye  2 года назад

      Thank you. Do you mean the CSS? Or the console?

  • @Ancode2
    @Ancode2 3 года назад

    very useful and understandable. I appreciate your work..

  • @balegoferidu9378
    @balegoferidu9378 3 года назад

    If I saw a comment that says "get data from input box" in a PR, your future with the team would be in question.

  • @bobich1244
    @bobich1244 3 года назад +1

    You don't call your function save and view and you don't call click event on yout input. How all of this can work ? I don't get it. My browser is asking for calling function at least. old_data is not a function.

    • @MelvinAdekanye
      @MelvinAdekanye  3 года назад

      I know what it's like not to have your code work. But I can help. I called the save and view function in the HTML button onclick. As for your error, you may have mistyped something important.
      Try watching the video again and code along. Hopefully that helps.

    • @bobich1244
      @bobich1244 3 года назад

      @@MelvinAdekanye thanks for your answer. Yeah JS is hard on me. I did what I needed but a bit differently.

  • @elirantakiya1005
    @elirantakiya1005 Год назад

    You are the best!!!

  • @farzanehfallahpour3431
    @farzanehfallahpour3431 3 года назад

    it was veryyyyyyyyyy useful And thank You😉

  • @codedynamics1
    @codedynamics1 Год назад +1

    thanks nice !!

  • @millicentmalinga962
    @millicentmalinga962 3 года назад +1

    You are awesome...

  • @alisonmiu
    @alisonmiu Год назад

    How do I save and view at the same time?

  • @Lok1goD
    @Lok1goD 2 года назад +1

    Огромное спасибо тебе ман) Очень помогло твоё видео!

  • @magic371
    @magic371 2 года назад

    How can I do this but save it for everyone? like a voting D:, helpppp

  • @jonldavis
    @jonldavis Год назад

    now how do you delete an entry?

  • @maxcramer
    @maxcramer 2 года назад

    how would you then use this to .map over the array instead?

    • @MelvinAdekanye
      @MelvinAdekanye  2 года назад

      Sorry for the late response. But elaborate on this thought.

    • @maxcramer
      @maxcramer 2 года назад

      @@MelvinAdekanye what i mean't was how would you then grab this out of local storage and then use the array in a .map but worked that one out

    • @MelvinAdekanye
      @MelvinAdekanye  2 года назад

      Okay. That's great. Glad you worked it out.

  • @chuckyyes
    @chuckyyes 3 года назад

    the data is only saved if it was typed on one device and if you open up another computer with this same code the data is not there is there a way to fix this and have the data stored permanently if you went on another computer and the data you entered is still there? store the information globally instead locally

    • @MelvinAdekanye
      @MelvinAdekanye  3 года назад

      For sure. First of all. Local storage is meant to be saved locally on a singular device. To achieve what you're looking for. You would need to run your website on a server with a database. But that might be a stretch. So use firebase. Firebase is a free cloud database that allows you to save data and have it appear on multiple devices.

    • @chuckyyes
      @chuckyyes 3 года назад

      @@MelvinAdekanye thanks

  • @nickcast4437
    @nickcast4437 3 года назад +1

    Hello man,thank you for the tutorial it helped me a lot for my final project,but can you please explain how do I remove an array from a key?They are marked with indexes 0,1,2,3 under the key Value, I do it with for() or something else?

    • @MelvinAdekanye
      @MelvinAdekanye  3 года назад +1

      You're very welcome. Sorry for the late reply. I'm not sure what you mean. Maybe send me an email.

  • @channakkranh
    @channakkranh 2 года назад

    So thank you so muchhhhh😂

  • @giacomofornaciari295
    @giacomofornaciari295 3 года назад

    Hi dude, great video! Is it possible to get and write only one element of the localStorage?

    • @MelvinAdekanye
      @MelvinAdekanye  3 года назад

      Yes it is. Here's a link to help: developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

  • @fahemzoldyck1729
    @fahemzoldyck1729 4 года назад

    Thanks , very helpful !
    Nne of my object's keys has an array as a value. I tried to JSON.stingify the whole thing but the content inside the array was saved an empty array ! do you know maybe why this is happening ?

    • @MelvinAdekanye
      @MelvinAdekanye  4 года назад

      No. But are there errors showing up in the logs?

  • @clarkbassem7319
    @clarkbassem7319 3 года назад

    How to make it show number 1 only ?

  • @EllantEladar37
    @EllantEladar37 2 года назад

    Could you please add a delete button for the delete the key and value in localStorage.getItem(); or localStorage.setItem()? I have a hard time to make a simple button for this one though.

    • @MelvinAdekanye
      @MelvinAdekanye  2 года назад

      Cheers!
      Just gonna drop this here:
      localStorage.setItem('text', 'Really cool text');
      localStorage.removeItem('text');

  • @AJNOX.
    @AJNOX. 4 года назад

    Can’t people change the local storage data through web dev tools and possibly use it maliciously?

    • @MelvinAdekanye
      @MelvinAdekanye  4 года назад

      Yes. They sure can! But this is for simple programs. I agree. You should never save important data in local storage. Leave it to the server side.

  • @bymaxmndr9888
    @bymaxmndr9888 4 года назад +2

    ❤❤love ur laugh keep laughing bro😂

  • @chandiprasad2750
    @chandiprasad2750 2 года назад

    thanks a lot bro

  • @refugiofarm
    @refugiofarm 3 года назад

    Do you have an idea on large form data that will be stored to localstorage? Our clients are complaining that they lost their data without saving so my solution supposedly is by storing it to localstorage. But after reading the 5/10mb limit, i do not know anymore. Your thoughts will be highly appreciated. Thanks

    • @MelvinAdekanye
      @MelvinAdekanye  3 года назад

      For sure. Try using Firebase. I would imaging you're using Local Storage because data can be easily saved and retrieved. But since you're noticing data loss. It would be best to store data on Firebase. It's just as easy and could be accessed on multiple devices.

  • @fehdi786
    @fehdi786 2 года назад

    Thank You SOOOO Much Broo i am working on a project and was stucked at this point cuz my local storage is replacing array values now it is solved Thanks again I am getting really frustated .....

  • @ishimwezachee2179
    @ishimwezachee2179 3 года назад

    Hy, That's was awesome vidoes, I just wonder why you just saved an empty array to local storage than direct saving with the data from the input. maybe you just save push the data to the array then save it to local storage than saving it twice

    • @bharathd22
      @bharathd22 3 года назад

      An array has to exist in the localstorage for us to push data into it.

  • @samyyoussef8380
    @samyyoussef8380 3 года назад

    thanks, but where to down load this html page

  • @deveshverma5982
    @deveshverma5982 3 года назад

    how to append only unique value in local storage ?

    • @MelvinAdekanye
      @MelvinAdekanye  3 года назад

      Well. You would have to check if the new value matches anything in local storage. If so, remove the new data from the array and append everything else.

  • @Pranav9894
    @Pranav9894 2 года назад

    Man does it still stay if we refresh the tabs

    • @MelvinAdekanye
      @MelvinAdekanye  2 года назад

      Yes it does! The data remains even when you refresh the page.

  • @JulioCesar-hh9wq
    @JulioCesar-hh9wq 2 года назад

    thanks dude

  • @x4vih338
    @x4vih338 3 года назад

    Does that work with objects too?

    • @MelvinAdekanye
      @MelvinAdekanye  3 года назад +1

      Yes. Objects, arrays, and all other data types.

  • @SonuKumar-uq2rb
    @SonuKumar-uq2rb Год назад

    love u bro

  • @rangabharath4253
    @rangabharath4253 4 года назад +1

    awesome

  • @yellowflame3798
    @yellowflame3798 3 года назад

    Thanks

  • @TPLCompany
    @TPLCompany 4 года назад

    Nice video! I have one question. Is it possible to store an array of numbers in cookie? I am making an e-commerce website for my school project and I am currently building a shopping cart. My array contains item_IDs from the database and I want to do a for-loop to display each item with corresponding image, price and name retrieving from the database using sql and php.

    • @MelvinAdekanye
      @MelvinAdekanye  4 года назад +2

      Yes it is. I'll definitely make a tutorial on cookies. But here's a stack overflow page that could help. stackoverflow.com/questions/4470477/create-array-in-cookie-with-javascript

    • @johnnelson141
      @johnnelson141 3 года назад

      What if I wanted to delete an index because I made a typo without going to console, how would I do that? And awesome tutorial!

  • @Bat_Ball_Diaries
    @Bat_Ball_Diaries 3 года назад

    thank you

  • @arturobatista8015
    @arturobatista8015 3 года назад +1

    thank u , :D

  • @matheusnb99
    @matheusnb99 3 года назад +1

    NEVER use var or fucntion. The values do not change, use const. As for the function, do const view = () => { }

  • @princepatrickc4611
    @princepatrickc4611 4 года назад

    hey Man! can you make a video that "user can update the data inside localStorage"? example, the data in sign up form, you will update it. been trying it but the new user will be push to the user :3

    • @MelvinAdekanye
      @MelvinAdekanye  4 года назад +1

      Oh. So updating individual items in the array/object. That's cool. But do this on the backend. Always remember, whatever is saved to Local Storage can be manually edited by the user. So depending on what you're saving, this could be a bad idea. For ex: networked_username, email, password, etc

    • @princepatrickc4611
      @princepatrickc4611 4 года назад

      @@MelvinAdekanye YES YES, I made settings in my app where you can edit what you have sign in in the "sign in form", that's what i'm trying to say ^^

  • @BiassedYT
    @BiassedYT 3 года назад

    Does it only work in HTML?

    • @MelvinAdekanye
      @MelvinAdekanye  3 года назад

      What do you mean by HTML.

    • @BiassedYT
      @BiassedYT 3 года назад

      @@MelvinAdekanye Like html file type (example: header.html)

    • @MelvinAdekanye
      @MelvinAdekanye  3 года назад

      @@BiassedYT Yes. It does. You would just have to write the Js part inside a script tag.
      ......
      Js part here

    • @BiassedYT
      @BiassedYT 3 года назад

      @@MelvinAdekanye oh okay. Thank you.

  • @epheymind8475
    @epheymind8475 2 года назад

    after i refresh browser the data disappear

    • @MelvinAdekanye
      @MelvinAdekanye  2 года назад

      Does it do this for all your browsers? Or just one? If this occurs in just one browser, it may be a browser setting. If it occurs in all, do you get any errors in your console?

  • @daddydefi
    @daddydefi 2 года назад

    what a based chad you are fam

  • @kolyxix
    @kolyxix 3 года назад

    I wish you provided the source code

  • @atifaslam2965
    @atifaslam2965 3 года назад

    Give more videos

  • @samyyoussef8380
    @samyyoussef8380 3 года назад

    Awosome like u say, quit early, why man?

    • @MelvinAdekanye
      @MelvinAdekanye  3 года назад +1

      Lol. Don't worry. Still here. Going to drop a cool tutorial soon.

  • @AlexanderWilhite
    @AlexanderWilhite Год назад

    • never trust a nerd to explain simple shit online

  • @DiamondEnfield
    @DiamondEnfield 4 года назад

    dude can u help me , i need to complete my job assigment

    • @EpicGamer-ny1fu
      @EpicGamer-ny1fu 4 года назад

      You're really asking some random dude on the internet to help do your work assignments? 🤦‍♂️

  • @hilariyushilariyus252
    @hilariyushilariyus252 4 года назад

    source code dood