JavaScript Local Storage Introduction

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.