Eazy Peezy: Saving data with localStorage

GIF of localStorage in action

If you don’t know me by now then you wouldn’t know that I love persistence. I think it’s a sexy feature with beautiful eyes, long red hair, and a mind that I don’t mind. Let’s use that super duper mind to save some data…locally…so we can persist like there’s no tomorrow...but if there is a tomorrow then we’ll be there… in Chrome’s Browser memory.

Continuing from the HOW TO ROCK YOUR HELLO WORLD Chrome Extension example, we will write some code to store the string that we type in so that it will remain and sustain and rein supreme.

Let’s start small

• Open Chrome’s console ( ctrl + shift + j|command + option + j )
• Using dot notation, give the object a property( name ) and assign a value( “Matty” )
• Experiment by typing in your own unique property and value

Quick Tips

• Values are stored as strings
• When retrieving values, you must convert them to their original data type

Arrays can use the split( ) method to convert a string value back into an array

Object values need to be assigned as a string with very specific syntax so JSON.parse( ) can convert it to an object

Now let’s start BIG

• To download, install, and test the Chrome Extension
  1. Download the .crx file
  2. Go to Chrome://extensions and drag and drop the file from Step#1
• To see and customize the source files, download the files from HERE.
• Here’s a screenshot of the JS code used in the Chrome Extension.
  1. When the Chrome Extension’s icon is clicked, Hello.html is loaded.
  2. The load Event Listener is triggered
  3. The world var = the span element inside the “Hello world” h2 element
  4. The worldName var = the input element where you type text
  5. worldName is used as a condition in an IF statement
  6. If it exists, it is used. If it doesn’t, the default value of “______” is used.