Storing Objects with Local Storage in JavaScript
- January 9, 2024
- Posted by: MainInstructor
- Category: BASIC Go JavaScript
Video Title: Storing Objects with Local Storage in JavaScript
Hey guys hey go my name is dawn and today I want to talk about how to store objects in your local storage with JavaScript so if you don’t know local storage is basically a method of storing key value pairs of information within your web browser and this data is
Persistent if you’re close the browser will refresh the page the data will actually stay there so by default and the limitation of local storage is that you can only store strings so you can’t even saw numbers or billions you can only store data as a string now what you
Can do is actually work around this and express your object as a string and then store it like that but first I want to show you how to actually store or so what happens when you store an object in the storage you know normally so inside
Your editor here what I’ll do is I’m just gonna make a new object literal something basic something like we’ll say let’s my object okay equal to an object with this just say – – basic properties will have name and we’ll set that to something like Dominic and then H as 56
All right so a basic object with two properties now if I was to go down here and add this my object object to the local storage we’ll see what happens so I’m just gonna say local storage alright dot set item okay and I pass in the key
We’ll just call this case something like let’s just actually let’s call it my object the same thing right so my obj alright and the value will be that my object our variable here okay so now if I just console dot log the local storage object we’ll see what happens so I’ve
Saved this and refresh the browser right and we get that right there so we get this it sort of worked we’ve got the mo object key but the value is object object so that right there isn’t the actual object if I was to go inside here
And say okay local storage dot gets item and pass it be my table key all right we get the same thing if I was to just say access to the name property all right we get undefined so the object isn’t actually being stored instead we’re getting this useless
String all right so how do you actually store an object it’s actually quite straightforward we need to represent the object as a string that’s because obviously local storage only accepts string so we have to actually convert it to a string somehow this is called civilization so
What we’re gonna do is make a new variable for this object and this will be the string representation of this object so we’ll say let’s my objects alright and we’ll just say serialized so civilised means converting it into some form of re readable data if that makes
Sense so my object serialized equals and we’re gonna use the JSON dot stringify method so we’re gonna use JSON to serialize this object and represent it as a string so I’ll say json dot stringify that method right there then we get a parse in my object now right so
Now if I was to log out my table to see realized we’ll see what happens I’ll say this one refresh the page and here we get that right there and that is the string representation of the object so that right there is okay to store key in
That local storage so back inside here we can now instead of storing my table we’re gonna store my objects serialized okay something like that now save this one and refresh we get here my opt equal to that that so that’s all there is the we’re halfway there now to actually
Get that object and start using it like normal we can do a similar thing we’re going to reverse that effects okay so get rid of that and down here we’ll make a new variable and we’ll call this one my off deserialize that will work but maybe something like my table converted
Back to mom so I will keep us will will keep deserialize okay so my object deserialized equals local storage dot gets by them alright we’re gonna get this my table however did actually convert this back into an actual object right now it’s a string so we can use the opposite of the
Json stringify and we’ll use instead json.parse okay so that one right there Jack’s on the pass is going to convert this string back into an object so now we have boom that one back so those two log up my table deserialized this time we should get basically that byte there
So I’ll save this one and refresh the page and when we get boom right there a normal JavaScript object alright so I recommend that you actually in your projects maybe um make a few keys so something like I don’t know app settings or user settings make a few keys and
Then store larger objects inside those as serialized in term a then you just simply obviously just convert that back into their form whenever you load the page so that is how you can use JSON dot stringify or you know civilization to store objects inside local storage that’s all for this
Video thank you for watching and I’ll see you later
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
I guess it works with arrays as well right?
Thank you!
Excellent explanation of local storage. Other videos I've watched really complicated it. Thanks!
Simplest video of this topic I've seen, thanks!
Why Do You Use LIGHT MODE
How do you recommend storing images?
Do you recommend serializing them?
Thanks Bro
Until when local storage will hold the data init?
Browser's cache is cleared?
i made same things but my console says: localStorage is not defined…why?
Wow! I liked the simplicity!
Thanks
there is a problem when I store second object it replaces first object
may I know reason?
thank you
Appreciate it
Thank you for making this breakdown and walk through! Super helpful.
This is very helpful than you.
I was stuck on figuring this out. Thanks for the help!
Seriously – great video! Super helpful.
How to push objects to storage when i create them dynamically
here after you video on js classes, great content thanks
how to store and retrieve array of object from local storage
Thanks! 🙂
I think this is the most basic explanation on local storage thank you. I have really been having a rough time getting my head around this simple concept. lol
Thanks for this explanation!
Thanks.
Can you please say how to display the selected checkbox value and radio button value in next page
Great explanation
This helped me a lot! Thanks!!
This helped. Thanks. I would recommend you to use a dark theme please. This irritates the eye a lot.
thanks bro so much, have a great week!