JavaScript Local Storage Introduction

Published: 04 January 2020
on channel: Code Bushi

1,287

Introduction on how to use JavaScript's window.localStorage by creating a Dark Theme for a simple site. We take a look at how to setItem and getItem from Local Storage.

Key Takeaways:

6:42 - localStorage.setItem() takes two arguments, the first is the Key and the second is the Value. Both Key and Value must be a string. You can see these stored values in the browser's dev tools, under the Application tab.

9:10 - To read from local storage, we use localStorage.getItem() and pass it the original Key that was stored. You will get back the string that was stored with the Key.

11:18 - When reading from local storage, it's a good idea to check if something was returned first, and then proceed with your code.

12:50 - If you're using local storage with React, you can store a React state object. You must first JSON.stringify() the object you want to store, since local storage only works with strings.

14:35 - When reading from local storage, and getting a JSON string, you need to JSON.parse() the Value and turn it back into an object.

15:50 - To use with React, one way is to setItem right after you perform a this.setState(), and you would stringify the object as you pass it into localStorage.setItem(). You can then getItem when you do a componentDidMount and this.setState() to retrieve your React state object from local storage.

On this page of the site you can watch the video online JavaScript Local Storage Introduction with a duration of hours minute second in good quality, which was uploaded by the user Code Bushi 04 January 2020, share the link with friends and acquaintances, this video has already been watched 1,287 times on youtube and it was liked by 34 viewers. Enjoy your viewing!

31,298,381

262K